Menyajikan CSS untuk Memformat Tampilan Form & Memahami Dasar Pemrograman Webklien Javascript - Praktikum 6


Ilham Prabu Zaky Setiawan
XI RPL 2
Absen 15
SMKN 4 Bandung


Assalamualaikum wr.wb.
Pada kesempatan kali ini saya akan melanjutkan materi pembahasan tentang penggunaan CSS pada form serta pengenalan dasar mengenai Javascript. Yang waktu minggu lalu kita telah mencoba banyak properti CSS kali ini kita akan mencoba hal tersebut lagi dalam hal pembuatan form.  Setelah pembuatan form disini kita akan membahas mengenai JavaScript mulai dari pengenalan sampai latihannya.

Oke tanpa berlama-lama lagi mari kita lanjut ke pembahasan materinya, pertama kita mulai dahulu dengan basmalah, ayo temen-temen baca dulu. Nah kalo udah mari kita mulai dengan pembuatan form terlebih dahulu.

Form Pada CSS

Source code HTML:
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2 - Pengaturan Pada Form Text Area</title>
     <link rel="stylesheet" href="CSSOnForm.css">
</head>
<body>
     <form name="form1">
          <table>
               <tr><td>Nama</td>
               <td width="15"><textarea name="textarea" cols="50"></textarea></td></tr>
               <tr><td width="100">Pesan</td>
               <td width="15"><textarea name="textarea" cols="50" rows="14"></textarea></td></tr>
               <tr>
                    <td width="58">Username</td>
                    <td width="230">:
                         <input type="text" name="nama">
                    </td>
               </tr>
               <tr>
                    <td width="58">Password</td>
                    <td width="230">:
                         <input type="password" name="password">
                    </td>
               </tr>
          </table>
     </form>
</body>
</html>
Source code CSS:
body {
     background-color: azure;
}

td {
     color: black;
}

form {
     box-sizing: border-box;
     padding: 15px;
     border: 2px solid black;
     width: 40%;
     margin: auto;
     background-color: mintcream;
     color: lightsteelblue;
     font-family: Arial Narrow;
}

textarea {
     color: black;
     background-color: mintcream;
     font-family: 'Courier New', Courier, monospace;
}

input {
     color: black;
     background-color: lavender;
     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: 'Courier New', Courier, monospace;
     font-size: 11;
}
Hasil saat dibuka di browser:


Video dengan CSS

Source code HTML:
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2 - Testing Video</title>
     <link rel="stylesheet" href="VideoCSS.css">
</head>
<body>
     <h1>Ini adalah video offline</h1>
          <video src="Media/Agama v2.0 KEL 4.mp4" controls="controls">Your browser does not support the video tag</video>
     <h1>Ini video dari YouTube</h1>
     <div class="videoWrapper">
          <!-- Copy & Pasted from YouTube -->
          <iframe src="https://www.youtube.com/watch?v=lf9Up4e4600" frameborder="10"></iframe>
     </div>
</body>
</html>
Source code CSS:
h1 {
     color: black;
     text-align: center;
     font-family: 'Courier New', Courier, monospace;
}

video {
     display: block;
     margin: 30px auto;
     width: 500px; height: 400px;
}

.videoWrapper {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 30px;
     height: 0px;
}

.videoWrapper iframe {
     position: absolute;
     top: 0; left: 0; right: 0;
     width: 40%; height: 100%;
}
Hasil saat dibuka di browser:


Pengenalan Javascript


JavaScript adalah bahasa pemograman yang digunakan untuk membuat interaksi atau menambah fitur web dinamis kedalam sebuah web. Untuk membuat halaman web, anda tidak harus menggunakan JavaScript. Namun, saat ini JavaScript hadir dalam hampir setiap halaman web modern. Sehingga JavaScript adalah salah satu bahasa pemograman web yang wajib di kuasai.

Javascript merupakan bagian dari 3 teknologi penting yang harus dikuasai programmer web, yakni HTML untuk konten (isi dari website), CSS untuk tampilan (presentation), dan JavaScript untuk interaksi (behavior).

Hampir seluruh website modern saat ini menggunakan JavaScript untuk membuat berbagai aplikasi yang dapat berinteraksi dengan user, seperti validasi form HTML, games, kalkulator, fitur chatting, dll.

Contoh sederhana penggunaan JavaScript dapat anda lihat pada situs daftartugas ini. Cobalah scroll halaman web sampai bawah, dan pada pojok kanan bawah browser akan muncul tanda panah yang jika di-klik akan membuat jendela web browser kembali ke posisi awal halaman. Ini adalah fitur sederhana yang dapat di buat menggunakan JavaScript.

Pengertian JavaScript

JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.
Bahasa pemrograman Client Side berbeda dengan bahasa pemrograman Server Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di sisi server.
Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor dan web browser. JavaScript memiliki fitur: high-level programming language, client-side, loosely tiped dan berorientasi objek.

Fungsi JavaScript dalam Pemrograman Web

JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web server.
Bayangkan ketika kita mengisi form registrasi untuk pendaftaran sebuah situs web, lalu men-klik tombol submit, menunggu sekitar 20 detik untuk website memproses isian form tersebut, dan mendapati halaman yang menyatakan bahwa terdapat kolom form yang masih belum diisi.

Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan untuk mengecek apakah seluruh form telah terisi atau tidak, bisa dipindahkan dari web server ke dalam web browser.
Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi form, namun untuk berbagai keperluan yang lebih modern. Berbagai animasi untuk mempercantik halaman web, fitur chatting, efek-efek modern, games, semuanya bisa dibuat menggunakan JavaScript.

Javascript Internal

JavaScript Internal adalah metode penulisan script JavaScript yang berada dalam satu file dengan HTML, kayak CSS gitu temen-temen jadi penulisan scriptnya itu disatuin tidak berbeda file.

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2 - Contoh Program Javascript Internal</title>
</head>
<body>
     <h1>Hello World!</h1>
     <p>Javascript Internal</p>
     <script>
          alert('Hello World!');
          var name = prompt('Silahkan isi nama anda: ');
          alert('Hello ' + name);
     </script>
</body>
</html>
Hasil saat dibuka di browser:


JavaScript External

JavaScript External adalah metode penulisan script JavaScript yang berada dalam file lain yang memiliki format .js, nah jadi sama ini juga kayak CSS tinggal nanti kita isi tuh dalam file .js nya  dan jangan lupa kita harus hubungkan antara file JavaScript dengan file HTML nya.

Source code HTML:
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2 - Contoh Program Javascript External</title>
</head>
<body>
     <h1>Hello World!</h1>
     <p>Javascript External</p>
<script src="script.js"></script>
</body>
</html>
Source code Javascript:
alert('Hello World!');
var name = prompt('Silahkan isi nama anda: ');
alert('Hello ' + name);

Hasil saat dibuka di browser:



Variable Dalam JavaScript

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2 - Javascript Variables</title>
</head>
<body>
     <h1>JavaScript Variables</h1>
     <p>pada contoh ini x, y & z adalah variable</p>
     <p>var x = 5 <br> var y = 6 <br> var z = x + y</p>

     <p id="demo"></p>

     <script>
          var x = 5;
          var y = 6;
          var z = x + y;
          document.getElementById("demo").innerHTML = "Nilai dari variable z adalah: " + z;
     </script>
</body>
</html>
Hasil saat dibuka di browser:


Operasi Variable Dalam JavaScript

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2 - Javascript Variables 2</title>
</head>
<body>
     <h1>Penjumlahan Variable</h1>
     <p>Diketahui : </p>
     <p>var price1 = 5 <br>var price2 = 6 <br>var total = price1 + price2</p>

     <p id="demo"></p>

     <script>
          var price1 = 5;
          var price2 = 6;
          var total = price1 + price2;
          document.getElementById("demo").innerHTML = "Nilai dari variable total adalah: " + total;
          document.getElementById("demo").innerHTML = "Nilai dari variable total adalah: " + total;

          // dengan Id yang sama output yang akan dieksekusi adalah pada baris deklarasi terakhir
     </script>
</body>
</html>
Hasil saat dibuka di browser:



Tipe data Dalam JavaScript

Source code:
<!DOCTYPE html>
<html lang="en">
<head>
     <title>Ilham Prabu Zaky S - XI RPL 2 - Javascript Variables dengan Type Data</title>
</head>
<body>

     <h1>Javascript Variables dengan Type Data</h1>

     <p>Deklarasi Strings harus disertai double quote</p>
     <p>Deklarasi Integer tidak perlu disertai tanda quote</p>
     <p>Cobalah dengan tanda komentar // </p>
     

     <p id="demo1"></p>
     <p id="demo2"></p>
     <p id="demo3"></p>

     <script>
          var pi = 3.14;
          var person = "John Doe";
          var answer = 'Yes I am';

          document.getElementById("demo1").innerHTML = "Type Data Float " + pi;
          document.getElementById("demo2").innerHTML = "Type Data String " + person;
          document.getElementById("demo3").innerHTML = "Type Data String " + answer;
     </script>
</body>
</html>
Hasil saat dibuka di browser:


Nah sudah selesai teman-teman pertemuan kita dalam materi kali ini, apabila terdapat hal yang kurang di dalam materi ini silahkan bisa kunjungi website W3school disana terdapat penjelasan berbagai elemen atau materi tambahan lainnya.

Alhamdulilah kita ucapkan bersama-sama, serta tetap pelajari, latihan dan latihan yah teman-teman biar kita senantiasa terbiasa akan pemrograman web ini. Sekian dari saya, saya ucapkan terimakasih banyak atas kunjungan dan perhatiannya, dan saya ucapkan mohon maaf yang sebesar-besarnya atas segala kesalahan dan kekhilafan yang telah saya perbuat, akhir kata.


Wassalamualaikum wr.wb

0 Response to "Menyajikan CSS untuk Memformat Tampilan Form & Memahami Dasar Pemrograman Webklien Javascript - Praktikum 6 "

Post a Comment

Postingan Terbaru

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel