Angga Gemilang

Nama Saya Angga Gemilang~~~
Kelas X-RPL 1

Saya adalah siswa di kelas X (10) - RPL 1 di SMK Negeri 4 Bandung.
SMK Negeri 4 Bandung

Saya Bersekolah di SMK Negeri 4 Bandung yaang beralamat di Jalan Kliningan No.6, Turangga, Lengkong, Turangga, Lengkong, Kota Bandung, Jawa Barat 40264
Blogger

Sublime better than CMS

Kamis, 20 September 2018

#14 Intermediate Web | Web Programming Tutorial

September 20, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, mengapa tidak lagi berada di level beginner? karena mulai sekarang kita akan mulai untuk memasuki materi Javascript. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 5 bab yang akan kita pelajari, yaitu:

Percabangan If
Percabangan Else
Percabangan If Else
Percabangan Switch Case
Quiz

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Percabangan If
Penjelasannya...

Struktur IF adalah stuktur kode pemrograman ‘conditional’ yang akan membuat percabangan di dalam program. Dengan menggunakan struktur IF, kita bisa membuat 2 percabangan program yang akan dieksekusi jika ‘kondisi’ terpenuhi, dan akan menjalankan kode program lain jika ‘kondisi’ tidak terpenuhi.

Percabangan if ini mempunyai struktur dasar seperti berikut :

if (kondisi) {

//kode program yang akan dijalankan jika kondisi terpenuhi

}

Contoh 1

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Umur</title>
 <link rel="stylesheet" href="index.css">
</head>
<body>
 <input class="button1" type="button" onclick="klik()" value="Penasaran yaa!">
 <p id="cobaan">
  <script>
   function klik(){

   var umur;
   umur = prompt("Masukan umur anda");
   umur = parseInt(umur);
   if (umur < 17) {
    alert("Kamu belum dapat mengikuti pemilu");
   }
   alert("Kamu dapat mengikuti pemilu");
  }
  </script>
 </p>
</body>
</html>

CSS :

input.button1
  {
   position: absolute;
   left: 50%;
   top: 33%;
   transform: translate(-50%, -50%);
   padding: 10px 40px;
   cursor: pointer;
   transition: .5s;
   border: none;
   display: flex;
   text-transform: uppercase;
   border-radius: 20px;
   box-shadow: none;
  }
  input.button1:hover
  {
   background: salmon;
   color: #fff;
   box-shadow: 0 5px 10px rgba(0,0,0,.5);
  }

Hasil Dari Pengerjaan Contoh percabangan If 1 :

Contoh 2

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Hobi</title>
</head>
<body>
 <input class="button1" type="button" onclick="klik()" value="Penasaran yaa!">
 <p id="cobaan">
  <script>
   function klik(){
   var olahraga;
   olaraga = prompt("Masukan olahraga yang kamu sukai? Climbing atau Downhill");
   if (olahraga == "Climbing" || olahraga == "Downhill");
   {
    alert("Kamu menyukai olahraga ekstream");
   }
   }
  </script>
 </p>
</body>
</html>

CSS :

input.button1
  {
   position: absolute;
   left: 50%;
   top: 33%;
   transform: translate(-50%, -50%);
   padding: 10px 40px;
   cursor: pointer;
   transition: .5s;
   border: none;
   display: flex;
   text-transform: uppercase;
   border-radius: 20px;
   box-shadow: none;
  }
  input.button1:hover
  {
   background: salmon;
   color: #fff;
   box-shadow: 0 5px 10px rgba(0,0,0,.5);
  }

Hasil Dari Pengerjaan Contoh percabangan If 2 :

Contoh 3

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Hobi</title>
</head>
<body>
<div class="keseluruhan"> 
 <div class="kotak">
 <p id="coba">Akan muncul tulisan "Good day !"<br> Jika waktu kurang dari 18.00</p>
 </div> 
 <p id="sore">Good Evening!</p>
 <script>
  sore.style.marginLeft = "115px";
  sore.style.fontSize = "30pt";
  if (new Date().getHours() < 18)
  {
   document.getElementById("demo").innerHTML = "Good day !";
  }
   document.getElementById("demo").style.color = "blue";
 </script>
</div>
</body>
</html>

CSS :

 <style type="text/css">
  body
  {
   background: linear-gradient(-255deg, salmon, white);
  }
  .keseluruhan
  {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
  }
  .kotak
  {
   padding: 10px 50px;
   width: 100%;
   height: 20%;
   border-radius: 30px;
   box-shadow: 0 12px 30px rgba(0,0,0,.5);
   font-family: arial;
   font-size: 20pt;
  }
  .kotak h3
  {
   font-family: arial;
   text-transform: uppercase;
  }
 </style>

Hasil Dari Pengerjaan Contoh percabangan If 3 :

Percabangan Else
Penjelasannya...

Struktur IF memiliki percabangan lain yang akan dijalankan jika kondisi IF tidak terpenuhi, yakni dengan menambahkan perintah ELSE. Digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi salah.

Percabangan else ini mempunyai struktur dasar seperti berikut :

if (kondisi) {

//kode program jika kondisi true

}

else {

//kode program jika kondisi false

}

Contoh 1 :

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Hobi</title>
</head>
<body>
<div class="keseluruhan"> 
 <div class="kotak">
 <p id="coba">Akan muncul tulisan "Good day !"<br> Jika waktu kurang dari 18.00</p>
 </div> 
 <p id="sore">Good Evening!</p>
 <script>
  sore.style.marginLeft = "115px";
  sore.style.fontSize = "30pt";
  if (new Date().getHours() < 18)
  {
   document.getElementById("demo").innerHTML = "Good day !";
  }
   document.getElementById("demo").style.color = "blue";
 </script>
</div>
</body>
</html>

CSS :

<style type="text/css">
  body
  {
   background: linear-gradient(-255deg, salmon, white);
  }
  .keseluruhan
  {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
  }
  .kotak
  {
   padding: 10px 50px;
   width: 100%;
   height: 20%;
   border-radius: 30px;
   box-shadow: 0 12px 30px rgba(0,0,0,.5);
   font-family: arial;
   font-size: 20pt;
  }
  .kotak h3
  {
   font-family: arial;
   text-transform: uppercase;
  }
 </style>

Hasil Dari Pengerjaan Percabangan If Else 1:

Contoh 2 :

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>If Else 3</title>
</head>
<body>
<div class="keseluruhan"> 
 <div class="kotak">
 <p id="cobaan">Kurang dari jam <b>9.00</b> muncul <b>"Selamat pagi"</b> <br>Jam <b>12-3</b> muncul <b>"Hari yang panas"</b> <br>Selebihnya akan muncul <b>"Hai dunia"</b> </p>
 <fieldset>
 <script>
  var d = new Date()
  var time = d.getHours()

  if (time < 9)
  {
   document.write("Selamat pagi !");
  }
  else if (time >= 12 && time < 3)
  {
   document.write("Hari yang panas");
  }
  else
  {
   document.write("Hai dunia !");
  }
 </script>
</fieldset>
</div>
</body>
</html>

CSS :

<style type="text/css"> <style type="text/css">
  body
  {
   background: linear-gradient(-255deg, salmon, white);
  }
  .keseluruhan
  {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
  }
  .kotak
  {
   padding: 40px 50px;
   width: 100%;
   height: 20%;
   border-radius: 30px;
   box-shadow: 0 12px 30px rgba(0,0,0,.5);
   font-family: arial;
   font-size: 20pt;
  }
  .kotak h3
  {
   font-family: arial;
   text-transform: uppercase;
  }
 </style>
 </style>

Hasil Dari Pengerjaan Percabangan If Else 2:

Switch Case
Penjelasannya...

Struktur switch adalah sebuah stuktur percabangan yang akan memeriksa suatu variabel, lalu menjalankan perintah-perintah yang sesuai dengan kondisi yang mungkin terjadi untuk variabel tersebut. Contoh programnya:

Contoh 1

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Switch case 1</title>
</head>
<body>
 <input class="button1" type="button" onclick="klik()" value="Penasaran yaa!">
 <p id="cobaan">
 <script>
  function klik(){

  var pilihan = prompt("Pilihan untuk cek pulsa\n1. Informasi pulsa anda\n2. Informasi masa aktif dan masa tenggang anda");
  pilihan = parseInt(pilihan);
  switch(pilihan){
   case 1 : alert("Jumlah pulsa anda adalah Rp 5000,00;");
    break;

   case 2 : alert("Masa aktif kartu anda hingga 20 September 2019");
    break;

   default:
    alert("Pilihlah sesuai nomer yang ada");
    break;
  }
 }
 </script>
</p>
</body>
</html>

CSS :

input.button1
  {
    position: absolute;
    left: 50%;
    top: 33%;
    transform: translate(-50%, -50%);
    padding: 10px 40px;
    cursor: pointer;
    transition: .5s;
    border: none;
    display: flex;
    text-transform: uppercase;
    border-radius: 20px;
    box-shadow: none;
  }
  input.button1:hover
  {
    background: salmon;
    color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,.5);
  }

Hasil Dari Pengerjaan Switch Case 1

Contoh 2

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Switch Case 2</title>
</head>
<body>
 <input class="button1" type="button" onclick="klik()" value="Penasaran yaa!">
 <p id="cobaan">
 <script>
  function klik(){

  alert("MADANG KUY\nSILAHKAN PILIH MENU YANG DIINGINKAN\n\nKlik ok untuk melanjutkan")
  var pilihan = prompt("1. Rendang................Rp10.000\n2. Ikan Gurame............Rp15.000\n3. Dendeng Crispi.........RP12.000\n4. Soto Padang............Rp15.000\n5. Gulai Sapi.............Rp17.000");

  pilihan = parseInt(pilihan);

  switch(pilihan) {
   case 1 : alert("Menu yang anda pilih : Rendang Rp10.000");
    break;

   case 2 : alert("Menu yang anda pilih : Ikan Gurame Rp15.000");
    break;

   case 3 : alert("Menu yang anda pilih : Dendeng Crispi RP12.000");
    break;

   case 4 : alert("Menu yang anda pilih : Soto Padang Rp15.000");
    break;

   case 5 : alert("Menu yang anda pilih : Gulai Sapi Rp17.000");
    break;

   default:
    alert("Menu yang anda pilih : Tidak ada/Silahkan pilih menu yang lain Terimakasih");
    break;
  }
 }
 </script>
</p>
</body>
</html>

CSS :

input.button1
  {
    position: absolute;
    left: 50%;
    top: 33%;
    transform: translate(-50%, -50%);
    padding: 10px 40px;
    cursor: pointer;
    transition: .5s;
    border: none;
    display: flex;
    text-transform: uppercase;
    border-radius: 20px;
    box-shadow: none;
  }
  input.button1:hover
  {
    background: salmon;
    color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,.5);
  }

Hasil Dari Pengerjaan Switch Case 2

Quiz
Penjelasannya...

Pada bab keempat ini, menjelaskan tentang pembuatan sebuah form dengan menggunakan input text dan submit. hanya menggunakan sedikit style yakni untuk megganti warna background, padding dan margin button, dll. overall merupakan default html

untuk file CSSnya kita inputkan href file yang bernama "extCSSonbutton.css" pada tag <link> yang disediakan.

Hasil Dari Pengerjaan ExtCSSonButton :

"Quiz Part Will Be updated Soon...!"

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #3 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Sabtu, 15 September 2018

#13 web Intermediate | Web Programming Tutorial

September 15, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, mengapa tidak lagi bereada di level begginer? karena mulai sekrang kita akan mulai untuk memasuki materi CSS. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Untuk penjelasannya, saya akan menjelaskan materi tentang CSS dari paling dasar, Yang pada postingan ini saya akan menjelaskan seluk beluk tentang css multimeda. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 4 bab yang akan kita pelajari, yaitu:

Pengertian Array
Jenis - Jenis Array
Cara Penulisan Array
Contoh Penggunaan Array

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Pengetian Array
Penjelasannya...

Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan istilah index. Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di index0, elemen kedua berada di index 1, dan lain sebagainya.

Array di dalam javascript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang setiap saat. "tidak terurut" Kita bisa mengisi hanya index 0, 5, dan 10 saja di dalam array.

Jenis - Jenis Array
Penjelasannya...

Array Multidimensi

Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi atau unidimensi. Berikut merupakan ilustrasi dari array monodimensi tersebut.

Perhatian :
Indeks ini akan diberikan secara otomatis oleh interpreter javascript, dimulai dari elemen/data pertama dengan indeks 0. Dalam suatu array dengan n elemen, maka elemen ke-n akan mempunyai indeks n-1.

Jika elemen suatu array berisikan array lainnya, maka array tersebut termasuk array multidimensi. Berikut ilustrasinya.

Array Asosiatif

Indek dalam array selain ditentukan secara otomatis oleh sistem dan selalu dimulai dari 0, juga dapat dimodifikasi dengan menggunakan kata (string) atau nilai tertentu. Tabel dengan indeks termodifikasi ini kita kenal dengan nama array asosiatif. Berikut adalah ilustrasinya

Cara Penulisan Array
Penjelasannya...

Sebuah object array dideklarasikan di JavaScript dengan beberapa cara berikut :

Dengan penggunaan keyword new Array(), dengan contoh sebagai berikut :
var objArr = new Array();

Dengan penggunaan keyword new Array(jumlahindex), dengan contoh sebagai berikut :
var objArr = new Array(3);

Dengan penggunaan keyword new Array(item1, item2, ...), dimana antara satu item dengan item lainnya tidak harus memiliki tipe data yang sama.
Contoh deklarasinya adalah sebagai berikut :
var objArr = new Array("Sumatera", "Jawa", 100);

Dengan penggunaan literal [item1, item2, item3, ...], dimana antara satu item dengan item lainnya tidak harus memiliki tipe data yang sama.
Contoh deklarasinya adalah sebagai berikut :
var objArr = [10, "Sarah", "Meliani", true];

Contoh Penggunaan Array
Penjelasannya...

Langsung saja saya mulai dengan contoh - contoh penggunaan dari array, walaupun masih basic, tapi yaudahlah. lumayan buat belajar...

Contoh Pertama

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
<div class="kotak">
 <h3>Ini adalah elemen array ke 2</h3>
 </div>
 <p id="coba2">
  <script>
   var siswa = new Array ("Wicky","Subi","Rajab","Renaldi");
   document.getElementById("coba2").innerHTML = siswa[2];
   coba2.style.color = "#000";
   coba2.style.fontWeight = "bold";
   coba2.style.fontFamily = "arial";
   coba2.style.fontSize = "30px"; 
   coba2.style.textTransform = "uppercase"; 
   coba2.style.marginLeft = "100px";
   coba2.style.textAlign = "center";
 </script>
</p>
</div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Contoh kedua

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
 <div class="kotak">
 <h3>Ini adalah contoh penggunaan array objek nama depan</h3>
 </div>
 <p id="objek">
  <script>
   var person ={firstName:"Mochammad", lastName:"Faisal", age:15};
   document.getElementById("objek").innerHTML = person["firstName"];
   objek.style.color = "#000";
   objek.style.fontWeight = "bold";
   objek.style.fontFamily = "arial";
   objek.style.fontSize = "30px"; 
   objek.style.textTransform = "uppercase"; 
   objek.style.marginLeft = "100px";
   objek.style.textAlign = "center";
  </script>
 </p>
 </div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Contoh Ketiga

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
<div class="kotak">
 <h3>Ini adalah contoh penggunaan array objek nama depan</h3>
</div>
<p id="coba">
<script>
var arrayHewan = ["Buaya", "Harimau", "Gajah", "Singa", "Jerapah", "Zebra", "Monyet", "Kelinci", "Lutung", "Kuda"];
document.write("	Di bonbin ada " + arrayHewan[0] + " dan " + arrayHewan[8] + arrayHewan[6] + "  dan teman-temannya ");
</script>
</p>
</div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Contoh Keempat

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
<div class="kotak">
 <h3>Ini adalah elemen array ke 2</h3>
 </div>
 <p id="coba2">
 <script>
   var siswaXRPL1=["Adi","Adnan","Arvi","Devina","Lukman","Pahmi"];
   document.getElementById("coba2").innerHTML = siswaXRPL1[4];
     coba2.style.color = "#000";
   coba2.style.fontWeight = "bold";
   coba2.style.fontFamily = "arial";
   coba2.style.fontSize = "30px"; 
   coba2.style.textTransform = "uppercase"; 
   coba2.style.marginLeft = "100px";
   coba2.style.textAlign = "center";
  </script>
</p>
</div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #13 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Jumat, 14 September 2018

#12 Intermediate Web | Web Programming Tutorial

September 14, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

Sejarah dan Pengertian Javascript
Perbedaan JS dan Java
Penulisan code di JS
Variabel dan Tipe Data
Quiz

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Sejarah dan Pengertian Javascript
Penjelasannya...

Sejarah awal mula javascript dimulai pada tahun 1994, pada saat itu perkembangan internet dan website sedang mengalami perkembangan yang sangat pesat, dan pembuatan website pada saat itu umumnya menggunakan bahasa pemrograman PERL. Pemrograman PERL termasuk kedalam bahasa pemrograman Server Side, dimana semua proses hanya bisa dilakukan di web server.

Karena pada saat itu rata-rata koneksi internet yang terbatas, dan setiap instruksi dari user harus dikirim terlebih dahulu kepada web server, kemudian baru ditampilkan lagi ke dalam web browser. Hal tersebut dipandang kurang efesien, karena cukup memakan waktu.

Hingga pada tahun 1995, Seorang programmer Netscape yang bernama Brendan Eich, mulai mengembangkan sebuah bahasa pemrograman script yang bernama Mocha. Pada saat itu Netscape merupakan sebuah perusahaan software yang ternama yang mengembangkan web browser Netscape Navigator.

Bahasa pemrograman Mocha pada saat itu bisa digunakan dalam 2 sisi, yaitu disisi client (Client Side) dan Server (Server Side). Perkembangan selanjutnya nama Mocha dirubah menjadi Livescript dan Liveware, dimana Livescript merupakan bahasa pemrograman untuk Client Side, sedangkan Liverware untuk Server Side. Ketika bahasa pemrograman tersebut akan dirilis bersamaan dengan web browser Netscape Navigator 2. Netscape melakukan sebuah kerjasama dengan Sun Microsystems untuk melakukan kerjasama dalam pengembangan Livescript. Kemudian Netscape merubah nama Livescript menjadi Javascript 1.0.

Lalu apasih JS?

Javascript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada website agar website tersebut menjadi lebih interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client side. Penggunaan kode javascript pada sebuah website bersifat opsional, artinya tidak harus selalu ada. Namun, website-website maupun blog modern saat ini hampir semuanya menggunakan kode javascript walaupun sedikit.

Perbedaan JS dan Java
Penjelasannya...

Perbdeaan Antara Javascript dan Java

Javascript biasanya dalam penggunaanya digabungkan dengan HTML, tujuannya adalah memperkaya HTML supaya bisa lebih interaktif, oleh karena itu java script sangat tergantung dengan browser yang digunakan. Jika browser tidak mengijikan(disable) untuk menggunakan javascript makan aplikasi yang menggunakan javascript tidak maksimal, bahkan bisa saja error. Java adalah bahasa pemogramam berorientasi object(OOP) dimana aplikasi yang dibuat bisa langsung di eksekusi, tentu saja dengan melakukan compiler terlebih dahulu. Bahasa java mirip dengan .Net nya Microsoft, namun java bersifat terbuka, berbeda dengan .Net yang penggunaanya membutuhkan lisensi.

JavaSript hanya merupakan bahasa scripting, sedangkan Java bahasa pemrograman yang multifungsi dan platform independent. Java bisa digunakan untuk membuat aplikasi desktop dan juga server (SDK dan EE) ada juga untuk pemrograman mobile (ME), sedangkan JavaSript berbasis client side hanya bisa dijalakan dengan browser dan dieksekusi di komputer klien. Selain itu Java juga bisa digunakan untuk membuat aplikasi desktop yang dijalankan di Browser dengan menggunakan Applet, sedangkan JavaScript hanya bisa berjalan bila dikombinasikan dengan HTML.

JavaScript adalah suatu script (text) yg dibaca oleh browser, kemudian diterjemahkan menjadi sekumpulan perintah. Kemudian perintah itu dijalankan di browser. JavaScript (umumnya) disisipkan dlm HTML. Java adalah suatu program yg dihasilkan (dicompile) di server, kemudian dijalankan di browser (kalo dia Java Applet) atau dijalankan di server (kalo dia Java Server Pages). Baru hasilnya ditampilkan di browser. Program Java harus diambil dari server.

Perbedaan utama antara Jaca Script dengan Java adalah cara suatu program dieksekusi. Dengan java sendiri penggunakaannya bisa lebih luas, JME –> untuk pengembangan aplikasi pada handphone, JDK –> pengembangan aplikasi pada desktop dan JEE –> untuk pengembangan aplikasi yang besar (enterprise)

Penulisan Code JS di HTML
Penjelasannya...

Tag <script>

untuk isi dari tag scriptnya sendiri merupakan dibawah ini :

alert("Hello ini penerapan javascript by Angga Ganteng...");

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
</head>
<body>
	<script type="text/javascript">
		alert("Ini merupakan contoh penerapan javascript by Angga Ganteng");
	</script>
</body>
</html>

Hasil Dari Pengerjaan Javascript1

File Eksternal

untuk file JSnya kita inputkan href file yang bernama "index.js" pada tag <script> yang disediakan.

<script type="text/javascript" src="index.js"></script>

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
</head>
<body>
	<script type="text/javascript" src="index.js"></script>
</body>
</html>

Hasil Dari Pengerjaan Javascript2

Attribute Event

Cara yang ketiga ini sering digunakan untuk memanggil fungsi pada event terentu. Misalnya ketika suatu elemen diklik, maka jalankan fungsi Javascript. Contohnya:

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Angga Gemilang</title>
 <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<script type="text/javascript">
		alert("Bu maaf saya baru bisa ngumpulin karena saya sakit 1 minggu...");
	</script>
	<div class="tulisan">
 	<h1 id="id1">Tulisan ini akan berubah warna</h1>
 	</div>
 	<button type="button" class="button1" onclick="document.getElementById('id1').style.color = 'salmon'">Change!!</button>
 	<button type="button" class="button2" ondblclick="document.getElementById('id1').style.color = '#000'">Change It back</button>
</body>
</html>

CSS :

.tulisan
 	{
 		width: 130%;
 		margin-left: -10%;
 	}

 	h1
 	{
 		margin-left: 30px;
 		font-family: arial;
 		text-transform: uppercase;
 	}
 	body
 	{
 		position: absolute;
 		top: 43%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
 	.button1
 	{
 		padding: 10px 40px;
 		cursor: pointer;
 		transition: .5s;
 		border: none;
 		display: flex;
 		text-transform: uppercase;
 		margin-left: 90px;
 		border-radius: 20px;
 		box-shadow: 0 5px 10px rgba(0,0,0,.5);
 	}
 	.button1:hover
 	{
 		background: salmon;
 		color: #fff;
 		box-shadow: none;
 	}
 	.button2
 	{
 		padding: 5px 40px;
 		cursor: pointer;
 		transition: .5s;
 		border: none;
 		position: absolute;
 		top: 85%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-transform: uppercase;
 		margin-left: 140px;
 		border-radius: 20px;
 		box-shadow: 0 5px 10px rgba(0,0,0,.5);
 	}
 	.button2:hover
 	{
 		background: salmon;
 		color: #fff;
 		box-shadow: none; 		
 	}

Hasil Dari Pengerjaan Attribute Event

Variabel dan Tipe Data
Penjelasannya...

Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti string (teks), number (angka), objek, array, dan sebagainya.

Kalian mungkin sudah mempelajari berbagai macam tipe data di bahasa pemrograman lain, seperti C++, java, dan lain sebagainya. Nah, di javascript juga kita menggunakan tipe data - tipe data yang biasa kita gunakan. Sedangkan untuk yang belum mengetahui tentang tipe data. Pengertian dari tipe data itu sendiri adalah suatu memori pada komputer yang digunakan untuk menyimpan. Menyimpan apa? yaitu menyimpan jenis nilai dari suatu variabel.

Contoh Penggunaan dari variabel dan tipe data itu aendiri :

Variabel On javascript 1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angga Gemilang</title>
</head>
<body>
<h1>Javascript Variable</h1>
<p>pada contoh ini x,y, & z adalah variable</p>
<p id="demo"></p>

<script type="text/javascript">
 var x = 5;
 var y = 6;
 var z = x + y;
document.getElementById('demo').innerHTML = z;
</script>

</body>
</html>

Hasil Dari Pengerjaan Variable on javascrip 1

Variable on javascript 2 :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angga Gemilang</title>
</head>
<body>
<h1>Javascript Variable</h1>
<p>pada contoh ini x,y, & z adalah variable</p>
<p id="demo"></p>
<script type="text/javascript">
 var price1 = 5;
 var price2 = 6;
 var total = price1 + price2;

document.getElementById('demo').innerHTML ="Totalnya adalah "+ total;
document.getElementById('demo').innerHTML ="Totalnya adalah "+ total;
</script>
</body>
</html>

Hasil Dari Pengerjaan Javascript2

Variable On Javascript With data Type:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angga Gemilang</title>
</head>
<body>
<h1>Javascript Variable dengan tipe data</h1>
<p>deklarasi string harus disertai tanda kutip</p>
<p>deklarasi angka tidak perlu disertai kutip</p>
<p>Cobalah dengan tanda komentar //</p>
<p id="demo"></p>
<script>
 var pi = 3.14;
 var person = "john doe";
 var answer = 'yes i am'

 //document.getElementById('demo').innerHTML = pi;
 document.getElementById('demo').innerHTML = person;
 //document.getElementById('demo').innerHTML = answer;
</script>
</body>
</html>

Hasil Dari Pengerjaan ExtCSSonButton :

Quiz
Penjelasannya...

Nah, pada bab ketujuh alias bab terakhir ini, menjelaskan tentang pembuatan sebuah form yang saya buat sendiri, lumayan modern, colorful dan menarik. form ini dibuat dengan menggunakan tag <fieldset> dan tag <legend> yang digunakan untuk membuat border dengan sedikit tambahan fitur jika dibandingkan dengan border biasa.

untuk file CSSnya kita inputkan href file yang bernama "cssonform2.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="quiz.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
	<link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
<div class="separator">	
	<fieldset>
		<legend>Formulir Pendaftaran Calon Peserta</legend>
			<form method="get" class="form1" name="form1">
				<table align="center">
					<tr>
						<td><label>Nama</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="Nama"></td>
					</tr>

					<tr>
						<td><label>No. Induk Penduduk</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="No. Induk Penduduk"></td>
					</tr>

					<tr>
						<td><label>Kelamin</label></td>
						<td><span style="font-size: 20pt;">:    </span><label class="container" class="lbl">Laki - Laki
 								<input type="radio" checked="checked" name="radio">
  								<span class="checkmark"></span>
							</label>
							<label class="container" class="lbl">Perempuan
  								<input type="radio" name="radio">
  								<span class="checkmark"></span>
							</label></td>
					</tr>

					<tr>
						<td><label class="ttl">Tempat Tanggal Lahir</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="ttl" class="Ttl"></td>
					</tr>

					<tr>
						<td><label>Agama</label></td>
							<td><span style="font-size: 20pt;">:    </span><select>
								<option>Agama</option>
								<option>Islam</option>
								<option>Kristen</option>
								<option>Buddha</option>
								<option>Hindu</option>
								<option>Konghucu</option>
							</select></td>
					</tr>

					<tr>
						<td><label>Status</label></td>
							<td><span style="font-size: 20pt;">:    </span><select>
								<option>Status</option>
								<option>Kawin</option>
								<option>Jomblo</option>
							</select></td>
					</tr>
				</table>
				<table align="center"> 
					<tr>
						<td><input type="submit" name="Browse" value="Browse" class="sbmt1"></td>
						<td><input type="submit" name="Submit" value="Submit" class="sbmt2"></td>
					</tr>
				</table>
		</form>
	</fieldset>
</div>
</body>
</html>

CSS :

		body
		{
			background: #33bcdc;
		}
		.separator
		{
			width: 60%;
			height: 60%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 2px solid #33bcdc;
		}
		fieldset
		{
			border-top: 3px dashed green;
			border-bottom: 2px dashed blue; 
			border-left: 3px dashed blue;
			background: #fff;
			box-shadow: 0 10px 30px rgba(0,0,0,.8); 
			border-radius: 10px;
			border-right: 2px dashed green;
		}
		legend
		{
			padding: 15px 25px;
			font-weight: bold;
			font-family: arial;
			background: #046f88;
			font-size: 13pt;
			text-transform: uppercase;
			color: #fff;
			border-radius: 10px;
		}
		table{
			width: 100%;
		}
		input[type="text"]
		{
			border: 2px solid green;
			width: 60%;
			padding: 3px 10px;
			border: none;
			border-bottom: 2px solid #ababab;
			height: 25px;
			font-size: 20pt;
			background: #fff;
			transition: .5s;
		}	
		input[type="text"]:focus
		{
			border-bottom: 2px solid #000;
		}
		label
		{
			font-size: 18pt;
			text-transform: uppercase;
		}
		table tr td
		{
			padding: 15px;
		}
		table tr td:first-child
		{			
			padding-left: 15%;
			width: 50%;
		}
		table tr td:last-child
		{
			width: 50%;
		}
		input[type="submit"]
		{
			margin-left: 20%;
			padding: 5px 10px;
			text-align: center;
			align-items: center;
			align-content: center;

		}
		.container {
   			position: relative;
    		        padding-left: 35px;
    		        margin-bottom: 12px;
    		        cursor: pointer;
    		        font-size: 22px;
    		        user-select: none;
		}
		.container input {
    		        position: absolute;
    		        opacity: 0;
    		        cursor: pointer;
		}
		.checkmark {
    		        position: absolute;
	    	        top: 0;
    		        left: 0;
  			height: 25px;
   	 		width: 25px;
    		        background-color: #eee;
    		        border-radius: 50%;
		}
		.container:hover input ~ .checkmark {
    		        background-color: #ccc;
		}
		.container input:checked ~ .checkmark {
    		        background-color: #2196F3;
		}
		.checkmark:after {
    		        content: "";
    		        position: absolute;
    		        display: none;
		}
		.container input:checked ~ .checkmark:after {
    		        display: block;
		}
		.container .checkmark:after {
 			top: 9px;
			left: 9px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: white;
		}
		select
		{
			border: 2px solid #5299d3;
			background: #5299d3;
			cursor: pointer;
			font-size: 12pt;
			color: #fff;
			width: 30%;
			text-transform: uppercase;
			padding: 10px 20px;
		}
		option
		{
			background: #90bee3;
			color: #000;
		}
		input[type="submit"]
		{
			padding: 10px 15px;
			background: #046f88;
			cursor: pointer;
			color: #fff;
			font-weight: bold;
			border-radius: 10px;
			transition: .5s;
			text-transform: uppercase;
			font-size: 13pt;
			margin-top: 3%;
		}
		input.sbmt1
		{
			margin-left: 70%;
		}
		input.sbmt2
		{
			margin-left: 2%;
			margin-top: 14px;
		}
		input[type="submit"]:hover
		{
			background: #5299d3;
			color: #000;
		}

Hasil Dari Pengerjaan Quiz :

"Quiz Part Will Be Updated Soon...!"

Wassalamualaikum wr, wb

Sabtu, 01 September 2018

#11 Intermediate Web | Web Programming Tutorial

September 01, 2018 Angga Gemilang No comments Edit

Assalamualaikum wr, wb

ExtCSSonForm1
ExtCSSonForm2
ExtCSSonForm3
ExtCSSonButton
ExtCSSonButtonHover
ExtCSSonButtonRadio
Quiz

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

ExtCSSonForm1
Penjelasannya...

Pada bab ke satu ini, menjelaskan tentang pembuatan form versi satu, tidak terlalu modern & menarik, namun lumayan untuk dipelajari.

untuk file CSSnya kita inputkan href file yang bernama "cssOnForm.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="cssOnForm.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Pengaturan Pada Form Text Area</title>
	<link rel="stylesheet" type="text/css" href="cssOnForm.css">
</head>
<body>
	<form name="form1" method="post" action="">
		<table>
			<tr>
				<td width="50">Nama</td>
				<td width="175">
					</textarea name="textarea" cols="50"></textarea>	
				</td>
			</tr>
			<tr>
				<td width="50">Pesan</td>
				<td width="175">
					<textarea name="textarea" cols="50" rows="14"></textarea>	
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

form{
	border:2px solid Yellow;
	width: 70%;
	margin-left: 0;/*jarak fieldset dari batas kiri layout */
	background-color: Green;
	color: Pink;
	font-family: Arial Narrow;
}
body{
	background-color: Salmon ;
}

Hasil Dari Pengerjaan ExtCSSonForm1 :

ExtCSSonform2
Penjelasannya...

Pada bab kedua ini, menjelaskan tentang pembuatan form versi kedua, tidak terlalu modern & menarik, namun lumayan untuk dipelajari.

untuk file CSSnya kita inputkan href file yang bernama "cssonform2.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="cssonform2.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Ganteng</title>
	<link rel="stylesheet" type="text/css" href="cssonform2.css">
</head>
<body>
	<form name="form1" method="post" action="index.html">
		<table bordercolor="1">
			<tr>
				<td width="50">Nama</td>
				<td width="175">
					<textarea name="textarea" cols="50"></textarea>
				</td>
			</tr>
			<tr>
				<td width="50">Pesan</td>
				<td width="175">
					<textarea name="textarea" cols="50" rows="14"></textarea>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

body
{
	background: pink;
	color: red;
	font: impact;
}
textarea
{
	color: yellow;
	background: blue;
	font-family: Arial;
}

Hasil Dari Pengerjaan ExtCSSonForm2 :

ExtCSSonForm3
Penjelasannya...

Pada bab ketiga ini, menjelaskan tentang pembuatan form versi ketiga, tidak terlalu modern & menarik, namun lumayan untuk dipelajari.

untuk file CSSnya kita inputkan href file yang bernama "cssOnForm3.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="cssOnForm3.css"></link>

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Pengaturan pada Form</title>
	<link rel="stylesheet" type="text/css" href="cssOnForm3.css"></link>
</head>
<body>
	<form name="form1" method="post" action="">
		<table>
			<tr>
				<td width="58">Nama</td>
				<td width="230">:
					<input type="text" name="nama">
				</td>
			</tr>
			<tr>
				<td width="58">Alamat</td>
				<td width="230">:
					<input type="text" name="alamat">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

input{
	color: red;
	background: yellow;
	border-color: green;
	border-bottom-color: black;
	border-top: 0px solid;
	border-bottom: 2px dotted;
	border-left: 0px solid;
	border-right: 0px solid;
	font-family: consolas;
	font-size: 11px;
}

Hasil Dari Pengerjaan ExtCSSonForm3

ExtCSSonButton
Penjelasannya...

<link rel="stylesheet" type="text/css" href="extCSSonbutton.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
	<link rel="stylesheet" type="text/css" href="extCSSonbutton.css">
</head>
<body>
	<form name="form1" method="post" action="index.html">
		<table>
			<tr>
				<td width="50">Nama</td>
				<td width="230"><input type="text" name="Nama"></td>
			</tr>
			<tr>
				<td width="50">Alamat</td>
				<td><input type="text" name="alamat"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" name="button" value="Submit"></td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

body
{
	background: lightcoral;
}
input.button
{
	color: salmon;
	background: lightblue;
	border-color: white;
	border-bottom-color: black;
	border-top: 1px dotted;
	border-bottom: 1px solid;
	border-left: 1px dotted;
	border-right: 2px dotted;
	font-family: verdana;
	font-size: 12px;
}

Hasil Dari Pengerjaan ExtCSSonButton :

ExCSSonButtonHover
Penjelasannya...

Pada bab ke kelima ini, menjelaskan tentang pembuatan form defaul html namun dibantu dengan sedikit style dari hover CSS. hover sendiri merupakan salah satu dari sekian banyak atrbiut dari css, yang berguna untuk mengubah atau mengganti sesuatu dari mouse cursor yang kita arahkan

untuk file CSSnya kita inputkan href file yang bernama "cssOnButtonHover.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="cssOnButtonHover.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Pengaturan Pada Form Tombol Hover</title>
	<link rel="stylesheet" type="text/css" href="cssOnButtonHover.css">
</head>
<body>
<form name="form1" method="post" action="">
	<table>
		<tr>
			<td width="58">Nama</td>
			<td width="230">:<input type="text" name="nama"></td>
		</tr>
		<tr>
			<td width="58">Alamat</td>
			<td width="230">:<input type="text" name="alamat"></td>
		</tr>
		<tr>
			<td></td>
			<td><input class="button" type="submit" name="Submit" value="Simpan"><input class="button" type="submit" name="Submit2" value="Submit"><br><br><a href="ExtCssOnButton.html" class="linknya">Kembali</a></td>
		</tr>
	</table>
</form>
</body>
</html>

CSS :

body
{
	background: lightcoral;
}
input.button
{
	color: salmon;
	background: lightblue;
	border-color: white;
	border-bottom-color: black;
	border-top: 1px dotted;
	border-bottom: 1px solid;
	border-left: 1px dotted;
	border-right: 2px dotted;
	font-family: verdana;
	font-size: 12px;
}

Hasil Dari Pengerjaan ExtCSSonButtonHover :

ExtCSSonButtonRadio
Penjelasannya...

Pada bab keenam ini, menjelaskan tentang pembuatan form dengan menggunakan input radio. tidak terlalu modern. basicly merupakan tag bawaan html.

untuk file CSSnya kita inputkan href file yang bernama "extCSSonRadioButton.css" pada tag <link> yang disediakan.

<link rel="stylesheet" type="text/css" href="extCSSonRadioButton.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
	<link rel="stylesheet" type="text/css" href="extCSSonRadioButton.css">
</head>
<body>
	<form name="form1" method="post" action="index.html" class="f1">
		<table bordercolor="1">
			<tr width="120">
				<td width="58">Kelamin</td>
				<td width="150">
					<input type="radio" name="radiobutton" value="radiobutton" class="rb1">Pria/Male
				</td>
			</tr>
			<tr>
				<td width="58"> </td>
				<td width="150" class="k1">
					<input type="radio" name="radiobutton" value="radiobutton" class="rb2">Wanita/Female
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

CSS :

input.rb1
{
	color: black;
	background: dodgerblue;
	border-color: lime;
	font-family: verdana;
	font-size: 12px;
}
input.rb2
{
	color: red;
	background: coral;
	border-color: yellow;
	font-family: verdana;
	font-size: 12px;
}
td
{
	color: midnightblue;
	background: bisque;
	border-color: yellow;
	font-family: verdana;
	font-size: 12px;
}
form.f1
{
	background: sienna;
}

Hasil Dari Pengerjaan ExtCSSonButtonRadio :

Quiz
Penjelasannya...

<link rel="stylesheet" type="text/css" href="quiz.css">

HTML :

<!DOCTYPE html>
<html>
<head>
	<title>Angga Gemilang</title>
	<link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
<div class="separator">	
	<fieldset>
		<legend>Formulir Pendaftaran Calon Peserta</legend>
			<form method="get" class="form1" name="form1">
				<table align="center">
					<tr>
						<td><label>Nama</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="Nama"></td>
					</tr>

					<tr>
						<td><label>No. Induk Penduduk</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="No. Induk Penduduk"></td>
					</tr>

					<tr>
						<td><label>Kelamin</label></td>
						<td><span style="font-size: 20pt;">:    </span><label class="container" class="lbl">Laki - Laki
 								<input type="radio" checked="checked" name="radio">
  								<span class="checkmark"></span>
							</label>
							<label class="container" class="lbl">Perempuan
  								<input type="radio" name="radio">
  								<span class="checkmark"></span>
							</label></td>
					</tr>

					<tr>
						<td><label class="ttl">Tempat Tanggal Lahir</label></td>
						<td><span style="font-size: 20pt;">:    </span><input type="text" name="ttl" class="Ttl"></td>
					</tr>

					<tr>
						<td><label>Agama</label></td>
							<td><span style="font-size: 20pt;">:    </span><select>
								<option>Agama</option>
								<option>Islam</option>
								<option>Kristen</option>
								<option>Buddha</option>
								<option>Hindu</option>
								<option>Konghucu</option>
							</select></td>
					</tr>

					<tr>
						<td><label>Status</label></td>
							<td><span style="font-size: 20pt;">:    </span><select>
								<option>Status</option>
								<option>Kawin</option>
								<option>Jomblo</option>
							</select></td>
					</tr>
				</table>
				<table align="center"> 
					<tr>
						<td><input type="submit" name="Browse" value="Browse" class="sbmt1"></td>
						<td><input type="submit" name="Submit" value="Submit" class="sbmt2"></td>
					</tr>
				</table>
		</form>
	</fieldset>
</div>
</body>
</html>

CSS :

		body
		{
			background: #33bcdc;
		}
		.separator
		{
			width: 60%;
			height: 60%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 2px solid #33bcdc;
		}
		fieldset
		{
			border-top: 3px dashed green;
			border-bottom: 2px dashed blue; 
			border-left: 3px dashed blue;
			background: #fff;
			box-shadow: 0 10px 30px rgba(0,0,0,.8); 
			border-radius: 10px;
			border-right: 2px dashed green;
		}
		legend
		{
			padding: 15px 25px;
			font-weight: bold;
			font-family: arial;
			background: #046f88;
			font-size: 13pt;
			text-transform: uppercase;
			color: #fff;
			border-radius: 10px;
		}
		table{
			width: 100%;
		}
		input[type="text"]
		{
			border: 2px solid green;
			width: 60%;
			padding: 3px 10px;
			border: none;
			border-bottom: 2px solid #ababab;
			height: 25px;
			font-size: 20pt;
			background: #fff;
			transition: .5s;
		}	
		input[type="text"]:focus
		{
			border-bottom: 2px solid #000;
		}
		label
		{
			font-size: 18pt;
			text-transform: uppercase;
		}
		table tr td
		{
			padding: 15px;
		}
		table tr td:first-child
		{			
			padding-left: 15%;
			width: 50%;
		}
		table tr td:last-child
		{
			width: 50%;
		}
		input[type="submit"]
		{
			margin-left: 20%;
			padding: 5px 10px;
			text-align: center;
			align-items: center;
			align-content: center;

		}
		.container {
   			position: relative;
    		        padding-left: 35px;
    		        margin-bottom: 12px;
    		        cursor: pointer;
    		        font-size: 22px;
    		        user-select: none;
		}
		.container input {
    		        position: absolute;
    		        opacity: 0;
    		        cursor: pointer;
		}
		.checkmark {
    		        position: absolute;
	    	        top: 0;
    		        left: 0;
  			height: 25px;
   	 		width: 25px;
    		        background-color: #eee;
    		        border-radius: 50%;
		}
		.container:hover input ~ .checkmark {
    		        background-color: #ccc;
		}
		.container input:checked ~ .checkmark {
    		        background-color: #2196F3;
		}
		.checkmark:after {
    		        content: "";
    		        position: absolute;
    		        display: none;
		}
		.container input:checked ~ .checkmark:after {
    		        display: block;
		}
		.container .checkmark:after {
 			top: 9px;
			left: 9px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: white;
		}
		select
		{
			border: 2px solid #5299d3;
			background: #5299d3;
			cursor: pointer;
			font-size: 12pt;
			color: #fff;
			width: 30%;
			text-transform: uppercase;
			padding: 10px 20px;
		}
		option
		{
			background: #90bee3;
			color: #000;
		}
		input[type="submit"]
		{
			padding: 10px 15px;
			background: #046f88;
			cursor: pointer;
			color: #fff;
			font-weight: bold;
			border-radius: 10px;
			transition: .5s;
			text-transform: uppercase;
			font-size: 13pt;
			margin-top: 3%;
		}
		input.sbmt1
		{
			margin-left: 70%;
		}
		input.sbmt2
		{
			margin-left: 2%;
			margin-top: 14px;
		}
		input[type="submit"]:hover
		{
			background: #5299d3;
			color: #000;
		}

Hasil Dari Pengerjaan Quiz :

Wassalamualaikum wr, wb

Kamis, 20 September 2018

Assalamualaikum wr, wb

Contoh 1

HTML :

CSS :

Contoh 2

HTML :

CSS :

Contoh 3

HTML :

CSS :

Contoh 1 :

HTML :

CSS :

Contoh 2 :

HTML :

CSS :

Contoh 1

HTML :

CSS :

Contoh 2

HTML :

CSS :

"Quiz Part Will Be updated Soon...!"

Sabtu, 15 September 2018

Assalamualaikum wr, wb

Array Multidimensi

Array Asosiatif

Contoh Pertama

HTML :

CSS :

Contoh kedua

HTML :

CSS :

Contoh Ketiga

HTML :

CSS :

Contoh Keempat

HTML :

CSS :

Jumat, 14 September 2018

Assalamualaikum wr, wb

Lalu apasih JS?

Tag <script>

HTML :

File Eksternal

HTML :

Attribute Event

HTML :

CSS :

Contoh Penggunaan dari variabel dan tipe data itu aendiri :

Variabel On javascript 1

Variable on javascript 2 :

Variable On Javascript With data Type:

HTML :

CSS :

"Quiz Part Will Be Updated Soon...!"

Sabtu, 01 September 2018

Assalamualaikum wr, wb

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

HTML :

CSS :

Follow Me

Clock

Calendar

Popular Posts

Blog Archive

About Me

Sent Quick Message