Category Archives: HTML

HTML

Responsive Web Design

Leave a reply

Dalam membuat website atau aplikasi berbasis web sebaiknya menggunakan disain web responsif (Responsive Web Design / RWD). Dengan RWD website atau aplikasi web kita dapat ditampilkan dengan baik di berbagai ukuran (diagonal) layar. Misalnya di TV dengan ukuran layar besar > 20 inch, di PC laptop/desktop 10-20 inch, atau di tablet / smartphone < 10 inch.

RWD terkait resolusi layar seperti UHD (3840 x 2160), FHD (1360px X 768px), HD (1024px X 768px), ataupun nHD (360p× X 640px).

Tampilan website atau aplikasi berbasis web yang responsif akan meningkatkan aksesibilitas (accessibility), usabilitas (usability) dan kepuasan pengguna (user satisfaction). Disamping itu juga akan mengurangi biaya pengembangan (Reduced development costs) karena tidak perlu membuat kode terpisah untuk device yang berbeda, dan dapat meningkatkan level SEO (Search Engine Optimization) karena lebih user-friendly dan mudah diakses.

Untuk membuat tampilan website atau aplikasi web dengan RWD, pertama kita perlu menambahkan dulu tag <meta> pada bagian HTML <head>, berikut ini.

 

 

Setelah itu kita bisa membuat layout web menggunakan CSS dengan 3 cara:

  1. CSS Layout Float
  2. CSS Layout Flexbox
  3. CSS Layout Grid

CSS memiliki @media rule yang diperkenalkan pada CSS2. @media rule ini digunakan untuk membuat style yang berbeda pada setiap tipe media. Misalnya: membuat rule style untuk layar PC, untuk printers, untuk smartphone, untuk TV, dan sebagainya.

Contoh kode CSS Media Queries untuk membuat style warna background biru pada device layar kecil (< 480px):

@media screen and (min-width: 480px) {
body {
background-color: #0000ff;
}
}

Berikut ini kode HTML5 dengan CSS Layout Float.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>RWD with CSS float</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Arial, Helvetica, sans-serif;
      }

      /* Style the header */
      header {
        background-color: #666;
        padding: 10px;
        text-align: center;
        font-size: 35px;
        color: white;
      }

      /* Create two columns that floats next to each other */
      nav {
        float: left;
        width: 15%;
        height: 300px;
        background: #ccc;
        padding: 20px;
      }

      /* Style the list inside the menu */
      nav ul {
        list-style-type: none;
        padding: 10px;
      }

      article {
        float: left;
        padding: 20px;
        width: 85%;
        background-color: #f1f1f1;
        height: 300px;
      }

      /* Clear floats after the columns */
      section::after {
        content: "";
        display: table;
        clear: both;
      }

      /* Style the footer */
      footer {
        background-color: #777;
        padding: 10px;
        text-align: center;
        color: white;
      }

      /* Responsive layout on small screens
      makes two columns stack on top of each other instead of next to each other*/
      @media (max-width: 600px) {
        nav,
        article {
          width: 100%;
          height: auto;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <p>R W D</p>
    </header>

    <section>
      <nav>
        <ul>
          <li><a href="#">HTML5</a></li>
          <li><a href="#">CSS3</a></li>
          <li><a href="#">JavaScript ES6</a></li>
        </ul>
      </nav>

      <article>
        <h1>Responsive Web Design (RWD)</h1>
        <p>
          This website is using CSS Layout Float. We create a header, two
          columns/boxes and a footer. On smaller screens, the columns will stack
          on top of each other.
        </p>
        <p>Resize the browser window to see the responsive effect.</p>
        <p>
          You can learn more about this in
          <a href="https://www.w3schools.com/html/html_responsive.asp"
            >HTML Responsive.</a
          >
        </p>
      </article>
    </section>

    <footer>
      <p>&copy; 2023</p>
    </footer>
  </body>
</html>

Berikut ini kode HTML5 dengan CSS Layout Flex.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>RWD with CSS Flexbox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Arial, Helvetica, sans-serif;
      }

      /* Style the header */
      header {
        background-color: #666;
        padding: 10px;
        text-align: center;
        font-size: 35px;
        color: #fff;
      }

      /* Container for flexboxes */
      section {
        display: flex;
      }

      /* Style the navigation menu */
      nav {
        flex: 1;
        background: #ccc;
        padding: 20px;
        height: 300px;
      }

      /* Style the list inside the menu */
      nav ul {
        list-style-type: none;
        padding: 0;
      }

      /* Style the content */
      article {
        flex: 6;
        background-color: #f1f1f1;
        padding: 10px;
      }

      /* Style the footer */
      footer {
        background-color: #777;
        padding: 10px;
        text-align: center;
        color: white;
      }

      /* Responsive layout 
      makes the menu and the content (inside the section) sit on top of each other 
      instead of next to each other */
      @media (max-width: 600px) {
        section {
          flex-direction: column;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <p>R W D</p>
    </header>

    <section>
      <nav>
        <ul>
          <li><a href="#">HTML5</a></li>
          <li><a href="#">CSS3</a></li>
          <li><a href="#">JavaScript ES6</a></li>
        </ul>
      </nav>

      <article>
        <h1>Responsive Web Design (RWD)</h1>
        <p>
          This website is using CSS Layout Flexbox. We create a header, two
          columns/boxes and a footer. On smaller screens, the columns will stack
          on top of each other.
        </p>
        <p>Resize the browser window to see the responsive effect.</p>
        <p>
          <strong>Note:</strong> Flexbox is not supported in Internet Explorer
          10 and earlier versions.
        </p>
        <p>
          You can learn more about this in
          <a href="https://www.w3schools.com/html/html_responsive.asp"
            >HTML Responsive.</a
          >
        </p>
      </article>
    </section>

    <footer>
      <p>&copy; 2023</p>
    </footer>
  </body>
</html>

Berikut ini kode HTML5 dengan CSS Layout Grid.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>RWD with CSS Grid</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
      .wrapper {
        display: grid;
        grid-gap: 0.1em;
        grid-template-areas: "header" "sidebar" "content" "sidebar2" "footer";
      }
      header {
        grid-area: header;
        padding: 10px;
        background-color: #666;
        color: #fff;
        text-align: center;
        font-size: 35px;
      }
      nav {
        grid-area: sidebar;
        padding: 20px;
        background-color: #ccc;
        color: #444;
        width: 180px;
        height: 300px;
      }
      aside {
        grid-area: sidebar2;
        padding: 10px;
        background-color: #ccc;
        color: #444;
      }
      section {
        grid-area: content;
        padding: 10px;
      }
      footer {
        grid-area: footer;
        padding: 10px;
        background-color: #666;
        color: #fff;
        text-align: center;
      }

      @media (min-width: 600px) {
        .wrapper {
          grid-gap: 5px;
          grid-template-columns: 220px auto 200px;
          grid-template-areas: "header header  header" "sidebar content sidebar2" "footer  footer  footer";
        }
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>R W D</header>
      <nav>
        <ul>
          <li><a href="#">HTML5</a></li>
          <li><a href="#">CSS3</a></li>
          <li><a href="#">JavaScript ES6</a></li>
        </ul>
      </nav>
      <aside>Right Sidebar</aside>
      <section>
        <h1>Responsive Web Design (RWD)</h1>
        <p>
          The CSS Grid Layout Module offers a grid-based layout system, with
          rows and columns, making it easier to design web pages without having
          to use floats and positioning.
        </p>
        <p>Resize the browser window to see the responsive effect.</p>
        <p>
          You can learn more about this in
          <a href="https://www.w3schools.com/html/html_responsive.asp"
            >HTML Responsive.</a
          >
        </p>
      </section>
      <footer>&copy; 2023</footer>
    </div>
  </body>
</html>

Silakan Anda coba ketiga teknik tersebut untuk membuat layout website atau aplikasi web menjadi responsif.

AJAX XHR vs Fetch API

Leave a reply

Pada posting sebelumnya kita telah mencoba menggunakan AJAX (Asynchronous JavaScript and XML) dengan menggunakan object XHR (XMLHttpRequest), sebuah object JavaScript yang banyak digunakan dalam pengembangan website dinamis.

Pada artikel kali ini kita akan membandingkan teknologi pengembangan web yang menggunakan XHR dengan Fetch API. Keduanya berguna untuk membuat aplikasi web interaktif yang memungkinkan halaman web kita dapat memperbarui informasi secara asinkron tanpa harus memuat ulang seluruh halaman web.

Teknologi Ajax dengan menggunakan XHR sudah diperkenalkan sejak tahun 2006. Pada tahun 2015 diperkenalkan teknologi AJAX baru dengan menggunakan Fetch API. Fetch API dirancang untuk menggantikan teknologi XHR dalam pengambilan data dari server menggunakan JavaScript supaya lebih mudah.

Berikut ini contoh coding perbandingan AJAX XHR dan Fetch API:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Belajar Dasar Ajax</title>

  </head>

  <body>

    <h1>Tutorial Ajax</h1>

    <button id="button" onclick="xhrloadContent()">XHR Load Content</button>

    <button id="button2" onclick="fetchloadContent()">

      Fetch API Load Content

    </button>

    <div id="hasil"></div>

    <script>

      const apiUrl = "https://jsonplaceholder.typicode.com/posts";

      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {

        if (this.readyState === 0) {

          console.log("request not initialized: ", this.readyState);

        }

        if (this.readyState === 1) {

          console.log("server connection established: ", this.readyState);

        }

        if (this.readyState === 2) {

          console.log("request received: ", this.readyState);

        }

        if (this.readyState === 3) {

          console.log("processing request: ", this.readyState);

        }

        if (this.readyState === 4) {

          console.log(

            "request finished and response is ready: ",

            this.readyState

          );

        }

      };

      xhr.open("GET", apiUrl, true);

      xhr.send();

      function xhrloadContent() {

        var xhr = new XMLHttpRequest();

        var url = "https://jsonplaceholder.typicode.com/posts";

        xhr.onloadstart = function () {

          document.getElementById("button").innerHTML = "Loading...";

        };

        xhr.onerror = function () {

          alert("Gagal mengambil data");

        };

        xhr.onloadend = function () {

          if (this.responseText !== "") {

            var data = JSON.parse(this.responseText);

            var template = data.map((post) => {

              return `  <h3>${post.title}</h3>

                        <p>${post.body}</p>

                        <hr>

                        `;

            });

            document.getElementById("hasil").innerHTML = template.join("<br>");

            document.getElementById("button").innerHTML = "Done";

            setTimeout(function () {

              document.getElementById("button").innerHTML = "Load Lagi";

            }, 3000);

          }

        };

        xhr.open("GET", url, true);

        xhr.send();

      }

      function fetchloadContent() {

        var url = "https://jsonplaceholder.typicode.com/posts";

        fetch(url)

          .then((response) => response.json())

          .then((data) => {

            console.log("Success:", data);

            var template = data.map((post) => {

              return `  <h3>${post.title}</h3>

                        <p>${post.body}</p>

                        <hr>

                        `;

            });

            document.getElementById("hasil").innerHTML = template.join("<br>");

          })

          .catch((error) => {

            console.error("Error:", error);

          });

        document.getElementById("button2").innerHTML = "Done";

      }

    </script>

  </body>

</html>

Membuat Center Div

Leave a reply

Ada kalanya dalam membuat sebuah halaman web kita membutuhkan bagian yang harus berada di tengah. Biasanya kita menggunakan CSS property “text-align:center”.

Disini akan diberikan 6 cara untuk membuat bagian yang harus berada di tengah itu dengan menggunakan tag div dan CSS.

Cara 1: Menggunakan class parent dan child dengan property “position: relative” dan “margin:auto”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Centering divs</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
        }

        #parentContainer {
            width: 100%;
            height: 400px;
            background-color: #2196F3;
            position: relative;
        }

        #childContainer {
            width: 100px;
            height: 100px;
            background-color: #b5deff;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="parentContainer">Parent Container
        <div id="childContainer">Child Container</div>
    </div>
</body>

</html>

Cara 2: Menggunakan class parent dan child dengan property “margin: auto” saja

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Centering divs</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
        }

        .center {
            margin: auto;
            padding: 10px;
            width: 300px;
            border: 3px solid #2196F3;
            background-color: #b5deff;
            text-align: center;
        }
    </style>
</head>

<body>

    <h2>Center Align Elements</h2>
    <p>To horizontally center a block element (like div), use margin: auto;</p>

    <div class="center">
        <p>Hello World!</p>
    </div>

</body>

</html>

Cara 3: Menggunakan property “margin: auto” dengan content image

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Centering divs</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
        }

        .center {
            display: block;
            margin: auto;
            content: url("./gambartengah.jpg");
        }
    </style>
</head>

<body>

    <h2>Center Align Element</h2>
    <p>To horizontally center a block element (like div), use margin: auto;</p>

    <div class="center"></div>
</body>

</html>

Cara 4: Menggunakan property “position: absolute” dan “transform: translate(-50%, -50%)”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Centering divs</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
        }

        .center {
            position: absolute;
            transform: translate(-50%, -50%);
            padding: 10px;
            border: 3px solid green;
            top: 50%;
            left: 50%;
        }
    </style>
</head>

<body>
   <h2>Center with position and transform</h2>

    <div class="center">
        <p>vertically and horizontally centered.</p>
    </div>

</body>

</html>

Cara 5: Menggunakan CSS Flexbox dengan property “display: flex” dan “justify-content: center” serta “align-items: center”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Center Div 5</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
        }

        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
            border: 3px solid green;
        }
    </style>
</head>

<body>
    <h2>Flexbox Centering</h2>
    <div class="center">
        <p>I am vertically and horizontally centered.<br>
            <img src="./gambartengah.jpg" alt="Paris" /></p>
    </div>
</body>

</html>

Cara 6: Menggunakan CSS Grid dengan class parent child dan property “display: grid”, “justify-content: center” serta “align-content: center”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Center Div 5</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0px;
            padding: 0px;
        }
        .parent {
            display: grid;
            justify-content: center;
            align-content: center;
            height: 600px;
            width: 100%;
            border: 1px solid black;
        }
        .child {
            height: 200px;
            width: 200px;
            background-color: #2196F3;
            text-align: center;
        }
    </style>
</head>

<body>
    <h2>Grid Centering</h2>

    <div class="parent">
        <div class="child">child</div>
    </div>
</body>

</html>

Selamat mencoba, semoga bermanfaat.

Happy Coding!

Membuat Multiple Select Option Checkbox

Leave a reply

Pada tulisan kali ini kita akan mencoba membuat multiple select option dengan checkbox. Pada gambar di atas ada 2 bentuk select option. Yang pertama adalah multiple select option tanpa checkbox dan yang kedua adalah multiple select option dengan checkbox.

Untuk membuat multiple select option kita biasanya menggunakan HTML tag <select> dan <option> dengan memberikan atribut ‘multiple’ pada tag select. Berikut ini coding multiple select option yang biasa (tanpa checkbox).

&lt;h2&gt;Multiple Select Option&lt;/h2&gt;
&lt;form&gt;
    &lt;label&gt;Pilihan: &lt;/label&gt;
    Tekan tombol Ctrl untuk memilih beberapa pilihan&lt;br /&gt;
    &lt;select name=&quot;pilih[]&quot; multiple style=&quot;height:70px;width:200px&quot;&gt;
        &lt;option value=&quot;0&quot; disabled&gt;Pilih Opsi&lt;/option&gt;
        &lt;option value='1'&gt;Pilihan Pertama&lt;/option&gt;
        &lt;option value='2'&gt;Pilihan Kedua&lt;/option&gt;
        &lt;option value='3'&gt;Pilihan Ketiga&lt;/option&gt;
    &lt;/select&gt;
    &lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;&lt;/p&gt;
&lt;/form&gt;

Untuk beberapa memilih opsi, kita harus tekan dan tahan tombol ‘Ctrl’ pada keyboard lalu klik opsi-opsi yang ada. Jika kita klik lagi satu opsi tanpa tekan tombol Ctrl maka pilihan yang sudah dipilih tadi akan hilang dan kita harus pilih lagi. Ini tentunya akan sedikit menyulitkan.

Nah, sekarang kita coba buat multiple select option dengan checkbox supaya kita tidak perlu menggunakan tombol ‘Ctrl’ untuk memilih opsinya sehingga opsi-opsi yang sudah dipilih tadi tidak hilang karena lupa tekan tombol ‘Ctrl’. Berikut ini coding multiple select option dengan checkbox. Pada coding tersebut kita menggunakan CSS untuk menempatkan posisi checkbox sedemikian rupa sehingga tampilannya seperti pada gambar diatas. Kita juga menggunakan javascript untuk membuat dropdown selectBox.

&lt;style&gt;
.multiselect{width:200px;}
.selectBox{position: relative;}
.selectBox select {width:100%;}
.overSelect {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
#checkboxes {display: none;border: 1px #a0a0a0 solid;}
#checkboxes label {display: block;}
#checkboxes label:hover {background-color: #1e90ff;}
&lt;/style&gt;

&lt;h2&gt;Multiple Select Option Checkbox&lt;/h2&gt;
&lt;form&gt;
    &lt;div class=&quot;multiselect&quot;&gt;
        &lt;div class=&quot;selectBox&quot; onclick=&quot;showCheckboxes()&quot;&gt;
            &lt;select&gt;
                &lt;option readonly&gt;Pilih opsi&lt;/option&gt;
            &lt;/select&gt;
            &lt;div class=&quot;overSelect&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id=&quot;checkboxes&quot;&gt;
            &lt;label for=&quot;satu&quot;&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;satu&quot; name=&quot;pilih[]&quot; value=&quot;1&quot; /&gt;Pilihan Pertama&lt;/label&gt;
            &lt;label for=&quot;dua&quot;&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;dua&quot; name=&quot;pilih[]&quot; value=&quot;2&quot; /&gt;Pilihan Kedua&lt;/label&gt;
            &lt;label for=&quot;tiga&quot;&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;tiga&quot; name=&quot;pilih[]&quot; value=&quot;3&quot; /&gt;Pilihan Ketiga&lt;/label&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;script&gt;
    var expanded = false;
    function showCheckboxes() {
        var checkboxes = document.getElementById(&quot;checkboxes&quot;);
        if (!expanded) {
            checkboxes.style.display = &quot;block&quot;;
            expanded = true;
        } else {
            checkboxes.style.display = &quot;none&quot;;
            expanded = false;
        }
    }
&lt;/script&gt;

Selamat mencoba. Happy coding…

Membuat Dialog Box dengan HTML tag Dialog

Leave a reply

Hai semua… kali ini saya akan memberikan cara membuat modal dialog box menggunakan tag HTML <dialog> dan javascript tanpa jquery.

Pada intinya tag dialog itu akan membuat kotak khusus sebagai subwindow atau bagian lain dari window kita. Biasanya dipakai untuk membuat pemberitahuan (alert) atau popup windows tanpa membuka window browser baru.

Contohnya kita ingin menampilkan dialog box berisi form yang bisa diisi dan diambil datanya.

&lt;dialog id=&quot;dialogBox&quot;&gt;
        &lt;form method=&quot;dialog&quot;&gt;
            &lt;p&gt;&lt;label&gt;Warna favorit:
                    &lt;select&gt;
                        &lt;option&gt;&lt;/option&gt;
                        &lt;option&gt;Merah&lt;/option&gt;
                        &lt;option&gt;Kuning&lt;/option&gt;
                        &lt;option&gt;Hijau&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/label&gt;&lt;/p&gt;
            Nama: &lt;input type=&quot;text&quot; name=&quot;nama&quot; id=&quot;nama&quot; size=&quot;5&quot; /&gt;
            &lt;menu&gt;
                &lt;button value=&quot;cancel&quot;&gt;Cancel&lt;/button&gt;
                &lt;button id=&quot;confirmBtn&quot; value=&quot;default&quot;&gt;Confirm&lt;/button&gt;
            &lt;/menu&gt;
        &lt;/form&gt;
    &lt;/dialog&gt;

    &lt;menu&gt;
        &lt;button id=&quot;openForm&quot;&gt;Open form&lt;/button&gt;
    &lt;/menu&gt;

    &lt;output aria-live=&quot;polite&quot;&gt;&lt;/output&gt;

Ada 2 field dalam form ini yaitu combo box dan text box. Kemudian diberikan 2 tombol: Cancel dan Confirm di dalam form tersebut.

Lalu kita sediakan tombol untuk membuka dialog form tersebut.

Tag output disediakan untuk menampilkan form dialog box yang dibuka dengan tombol ‘Openform’. Attribut aria-live=”polite” pada tag output diberikan untuk membuat screen reader menunggu sampai user melakukan perubahan pada tag output.

Selanjutnya kita buat coding javascriptnya berikut ini.

        const updateButton = document.getElementById('openForm');
        const dialogBox = document.getElementById('dialogBox');
        const outputBox = document.querySelector('output');
        const selectEl = document.querySelector('select');
        const nama = document.getElementById('nama');
        const confirmBtn = document.getElementById('confirmBtn');

        // &quot;Open form&quot; button opens the &lt;dialog&gt; modally
        updateButton.addEventListener('click', function onOpen() {
            if (typeof dialogBox.showModal === &quot;function&quot;) {
                dialogBox.showModal();
            } else {
                alert(&quot;The &lt;dialog&gt; API is not supported by this browser&quot;);
            }
        });
        // input sets the value of the submit button
        selectEl.addEventListener('change', function onSelect(e) {
            confirmBtn.value = selectEl.value;
        });
        // &quot;Confirm&quot; button of form triggers &quot;close&quot; on dialog because of [method=&quot;dialog&quot;]
        dialogBox.addEventListener('close', function onClose() {
            outputBox.value = &quot;Warna favorit &quot; + nama.value + &quot; adalah &quot; + dialogBox.returnValue;
        });

Itulah cara untuk membuat modal dialog box dengan html tag <dialog> dan javascript sederhana. Selamat mencoba, semoga berhasil.

Membuat Header dan Footer tetap di atas dan di bawah

Leave a reply

Kita akan membuat header tetap berada di atas dan footer tetap berada di bawah jika posisi content di-scroll seperti pada gambar di atas. Walaupun content hanya berisi beberapa baris namun header dan footer tetap di posisinya.

Pada bagian div class fixed-header diberikan CSS properti top:0 untuk membuat header pada posisi atas layar dan pada bagian div class fixed-footer diberikan CSS properti bottom:0 untuk membuat footer pada posisi bawah layar. Untuk membuat posisi header dan footer tetap di posisinya, maka kita berikan CSS properti position: fixed; Walaupun halaman web ini di scroll namun posisi header tetap berada di atas dan footer tetap berada di bawah. Sebagai testing scroll halaman web diberikan CSS properti line-height: 100px; supaya halaman lebih panjang untuk scroll.

Berikut coding CSS dan HTML selengkapnya.

        body {
            margin: 0;
            padding: 0;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
            display: inline-block;
        }

        nav a:hover {
            background-color: red;
        }

        .fixed-header,
        .fixed-footer {
            width: 100%;
            position: fixed;
            background: #333;
            padding: 5px;
            color: #fff;
        }

        .fixed-header {
            top: 0;
        }

        .fixed-footer {
            bottom: 0;
            text-align: center;
        }


        .content {
            width: 100%;
            padding-top: 60px;
            padding-bottom: 50px;
        }

        .content p {
            line-height: 100px;
            padding: 10px;
        }
    



    <div class="fixed-header">
        
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Products</a>
            <a href="#">Contact Us</a>
        
    </div>
    <div class="content">
        <h1>Membuat Fixed Header dan Footer dengan CSS</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.
            Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum
            scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet
            elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus
            nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum
            neque porttitor. Integer faucibus ligula.
        </p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh,
            facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae
            est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum
            viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique,
            accumsan nunc eu, hendrerit tellus.
        </p>
    </div>
    <div class="fixed-footer">
        Copyright &copy; 2021
    </div>

Selamat mencoba. Happy coding…

Membuat Display Card secara Vertical

Leave a reply

Untuk menampilkan CSS Card secara horizontal kita dapat membuatnya dengan coding berikut ini.

&lt;!doctype HTML&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;title&gt;CSS Vertical Cards&lt;/title&gt;
  &lt;style&gt; 
html, body {
  font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
  margin:0;padding:0;
}
header {
  overflow: hidden;
  background-color:#1A237E;
  color:#ffffff;
  padding: 10px;
  text-align: center;
  font: bold 25px Roboto;
}
nav {
  background-color:#3F51B5;
  padding: 5px;
  text-align: center;
}
select {
  border: 0;
  font: 20px Roboto;
}
article {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: max-content;
  grid-auto-flow: row dense;
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 95%;
	margin:10px;
}
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
    padding: 2px 10px;
}
footer {
  position: relative;
  left: 0;
  bottom: 0;
  padding: 2px 0;
  height: 40px;
  width: 100%;
  background-color:#1A237E;
  color: white;
  text-align: center;
  font: 12px Arial;
}
@keyframes spin {to {stroke-dashoffset:-264;}}
.spinner circle {
  fill: none;
  stroke: yellow;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-dasharray: 0, 0, 70, 194;
  stroke-dashoffset: 0;
  animation: spin 1s infinite linear;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;header&gt;CSS Vertical Cards&lt;/header&gt;
  &lt;nav&gt;
    &lt;select id=&quot;sources&quot; onchange='document.getElementById(&quot;spinner&quot;).style.display=&quot;inline&quot;;'&gt;
	&lt;option value=&quot;cat1&quot;&gt;Category 1&lt;/option&gt;
	&lt;option value=&quot;cat2&quot;&gt;Category 2&lt;/option&gt;
	&lt;option value=&quot;cat3&quot;&gt;Category 3&lt;/option&gt;
	&lt;option value=&quot;cat4&quot;&gt;Category 4&lt;/option&gt;
	&lt;option value=&quot;cat5&quot;&gt;Category 5&lt;/option&gt;
    &lt;/select&gt;
    &lt;svg id=&quot;spinner&quot; class=&quot;spinner&quot; viewBox=&quot;0 0 100 100&quot; width=&quot;20&quot; height=&quot;20&quot; style=&quot;display:none;&quot;&gt;
     &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;42&quot; transform=&quot;rotate(-90,50,50)&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;
  &lt;/nav&gt;
  &lt;article&gt;
	&lt;div class=&quot;card&quot;&gt;
	  &lt;img src=&quot;https://cdn.mos.cms.futurecdn.net/8pa9E97uBFicnzfDGWcuFW-1200-80.jpg&quot; alt=&quot;Amazon Echo Show review&quot; style=&quot;width:100%&quot;&gt;
	  &lt;div class=&quot;container&quot;&gt;
		&lt;a href=&quot;https://www.techradar.com/reviews/amazon-echo-show-review&quot;&gt;
		&lt;h3&gt;Amazon Echo Show review&lt;/h3&gt;&lt;/a&gt;
		&lt;p&gt;This isn't Amazon's first entry into the world of smart screens – the company has two smart screen products currently on the market - the original Echo Show and the smaller Echo Spot. While the Spot is an incredibly cute, quirky little guy with charm in spade…..&lt;/p&gt;
	&lt;/div&gt;
	&lt;/div&gt;		
	&lt;div class=&quot;card&quot;&gt;
	  &lt;img src=&quot;https://cdn.mos.cms.futurecdn.net/kdjAsfBqajhQR2ZFTu7CAb-1200-80.jpg&quot; alt=&quot;Your iPad Pro might have a bend but it’s not a defect&quot; style=&quot;width:100%&quot;&gt;
	  &lt;div class=&quot;container&quot;&gt;
	&lt;a href=&quot;https://www.techradar.com/news/your-ipad-pro-might-have-a-bend-but-its-not-a-defect&quot;&gt;
	&lt;h3&gt;Your iPad Pro might have a bend but it’s not a defect&lt;/h3&gt;&lt;/a&gt;
	&lt;p&gt;Back in November we started hearing reports that some of Apple’s latest iPads – the iPad Pro 11 and iPad Pro 12.9 (2018) - were exhibiting slight bends, either straight out of the box or after normal use. Now, Apple has responded to these claims, admitting th…..&lt;/p&gt;
	 &lt;/div&gt;
	&lt;/div&gt;				  
&lt;div class=&quot;card&quot;&gt;
	&lt;img src=&quot;https://cdn.mos.cms.futurecdn.net/ugAWR3oUmPFtzrKs5ptJwP-1200-80.jpg&quot; alt=&quot;PlayStation Classic drops to just $75 on Amazon&quot; style=&quot;width:100%&quot;&gt;
	&lt;div class=&quot;container&quot;&gt;
	&lt;a href=&quot;https://www.techradar.com/news/playstation-classic-drops-to-just-dollar75-on-amazon&quot;&gt;
	&lt;h3&gt;PlayStation Classic drops to just $75 on Amazon&lt;/h3&gt;&lt;/a&gt;
	&lt;p&gt;Sony’s PlayStation Classic is an amazing device, but we found it doesn’t quite measure up to Nintendo’s NES and SNES nostalgia boxes. Namely, the PS1 revival machine’s games catalog left out some of heavy-hitters. But, thanks to a $25 off deal on Amazon right…..&lt;/p&gt;
	&lt;/div&gt;
	&lt;/div&gt;		
	&lt;div class=&quot;card&quot;&gt;
	&lt;img src=&quot;https://cdn.mos.cms.futurecdn.net/tpDMjdzhEQ4Fe2czRELHhH-1200-80.jpg&quot; alt=&quot;HP Spectre Folio review&quot; style=&quot;width:100%&quot;&gt;
	&lt;div class=&quot;container&quot;&gt;
	&lt;a href=&quot;https://www.techradar.com/reviews/hp-spectre-folio-review&quot;&gt;
	&lt;h3&gt;HP Spectre Folio review&lt;/h3&gt;&lt;/a&gt;
	&lt;p&gt;When HP unveiled the HP Spectre Folio earlier this year, it made some big claims about how the 2-in-1 laptop would reinvent the PC. That’s a pretty huge promise, especially as we’ve seen a number of innovative designs that have changed how we think about PCs.…..&lt;/p&gt;
	 &lt;/div&gt;
	&lt;/div&gt;		
			  
	&lt;div class=&quot;card&quot;&gt;
	  &lt;img src=&quot;https://cdn.mos.cms.futurecdn.net/fPJqvxAMVtc46AyzAKVPbX-1200-80.jpg&quot; alt=&quot;TechRadar's Holiday Gift Guide 2018&quot; style=&quot;width:100%&quot;&gt;
	  &lt;div class=&quot;container&quot;&gt;
	        &lt;a href=&quot;https://www.techradar.com/best/holiday-gift-guide-2018&quot;&gt;
	        &lt;h3&gt;TechRadar's Holiday Gift Guide 2018&lt;/h3&gt;&lt;/a&gt;
		&lt;p&gt;The TechRadar editorial team spends all year testing and writing about gadgets so that you, the consumer, know about the best gadgets to buy. And there's no more important time for us than Black Friday and Cyber Monday. It's when we see our tech buying advice…..&lt;/p&gt;
	   &lt;/div&gt;
	&lt;/div&gt;		
			  
	&lt;div class=&quot;card&quot;&gt;
	  &lt;img src=&quot;https://cdn.mos.cms.futurecdn.net/FtQZs2si8P9CozVhQ8W56c-1200-80.jpg&quot; alt=&quot;10 ways to stay connected on the go without your smartphone&quot; style=&quot;width:100%&quot;&gt;
	  &lt;div class=&quot;container&quot;&gt;
	        &lt;a href=&quot;https://www.techradar.com/news/10-ways-to-stay-connected-on-the-go-without-your-smartphone&quot;&gt;
		&lt;h3&gt;10 ways to stay connected on the go without your smartphone&lt;/h3&gt;&lt;/a&gt;
		&lt;p&gt;Ten years after the first iPhone burst onto the scene, defining the smartphone, more than a billion people across the world use a smartphone every day, and in the west roughly two-thirds of the population have committed to the ‘smart’ life. From breakfast to …..&lt;/p&gt;
	     &lt;/div&gt;
	 &lt;/div&gt;		
    &lt;/article&gt;
&lt;footer&gt;&lt;p&gt;CSS Card Vertical © 2019&lt;/p&gt;&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba. Semoga berhasil.

Membuat Display Card secara Horizontal

Leave a reply

CSSHorizontalCard

Untuk menampilkan CSS Card secara horizontal kita dapat membuatnya dengan coding berikut ini.
Pada script CSS kita gunakan ukuran tinggi dan lebar secara relative dengan satuan em (2em = 2 kali ukuran font saat ini) dan juga vh (1vh = 1% dari tinggi viewport).
Pada script CSS ini juga kita buat supaya tampilan text yang terlalu panjang ditampilkan gradient seolah-olah akan hilang/putus seperti pada card 5.

Berikut coding selengkapnya.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
	&lt;title&gt;CSS Horizontal Cards&lt;/title&gt;
	&lt;style&gt;
	html,body {
	  margin: 0; padding:0;
	  width: 100vw;
	  overflow-x: hidden;
	  background-color: #f0f0f0;
	  font: 14px 'Open Sans', sans-serif;
	  line-height: 1.4em;
	  color: #404646;
	}
	header {
	  overflow: hidden;
	  background-color:#1565C0;
	  color:#ffffff;
	  padding: 10px;
	  text-align: center;
	  font: bold 25px Roboto;
	}
	.container {
	  box-sizing: border-box;
	  min-height: 83vh;
	  width: 100%;
	  margin: auto;
	  display: flex;
	  flex-flow: row wrap;
	  align-content: flex-start;
	  padding: 0.2em;
	}
	.card {
	  margin: 0.5em 1.2em 0.5em 0.1em;
	  height: 14em;
	  max-width: 99%;
	  flex: 1 1 auto;
	  display: flex;
	  background-color: white;
	  box-shadow: 1px 3px 3px rgba(0, 10, 20, 0.06);
	  border-radius: 15px;
	}
	.card img {
	  height: 100%;
	  max-width: 10em;
	  -o-object-fit: cover;
		 object-fit: cover;
	  flex: 1 1 auto;
	  border-radius: 15px 0 0 15px;
	}
	.card-body {
	  width: 12em;
	  max-height: 100%;
	  flex: 1 1 auto;
	  display: flex;
	  flex-flow: column nowrap;
	  justify-content: flex-start;
	  padding: 1em;
	}
	.card-body button {
	  min-width: 8.3em;
	  flex: none;
	  align-self: flex-start;
	  margin-top: auto;
	  padding: 0.6em 1.2em;
	  font-size: 0.92em;
	  color: #404646;
	  background: none;
	  border: 0.5px solid #777;
	  border-radius: 5px;
	}
	.card-body button:hover {
	  border-color: #BBDEFB;
	  background:#BBDEFB;
	}
	.card-text {
	  position: relative;
	  flex: 1;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  margin: 0 0 0.8em 0;
	  padding: 0;
	}
	.card-text h3, .card-text p {
	  margin-top: 0;
	}
	.card-text:after {
	  position: absolute;
	  bottom: 0;
	  content: &quot;&quot;;
	  width: 100%;
	  height: 1em;
	  background: linear-gradient(rgba(255, 255, 255, 0), white);
	}
	a {
	  color: #d07777;
	  text-decoration: none;
	}
	a:hover {
	  text-decoration: underline;
	}
	footer {
	  position:relative;
	  left: 0;
	  bottom: 0;
	  height: 40px;
	  width: 100%;
	  background-color:#1565C0;
	  color: white;
	  text-align: center;
	  vertical-align: text-bottom;
	}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;header&gt;CSS Horizontal Cards&lt;/header&gt;
	&lt;div class='container'&gt;
		&lt;div class='card'&gt;
			&lt;img src='https://images.pexels.com/photos/462235/pexels-photo-462235.jpeg?auto=compress&amp;amp;cs=tinysrgb&amp;amp;h=750&amp;amp;w=1260'&gt;
			&lt;div class='card-body'&gt;
			  &lt;div class='card-text'&gt;
				&lt;h3&gt;1. Lorem ipsum&lt;/h3&gt;
				&lt;p&gt;
				  Also check out the
				  &lt;a href='https://codepen.io/abcretrograde/pen/ZogNOZ' target='_blank'&gt;Grid&amp;nbsp;version&lt;/a&gt;
				&lt;/p&gt;
			  &lt;/div&gt;
			  &lt;button&gt;More...&lt;/button&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		
		&lt;div class='card'&gt;
			&lt;img src='https://images.pexels.com/photos/1065711/pexels-photo-1065711.jpeg?auto=compress&amp;amp;cs=tinysrgb&amp;amp;h=750&amp;amp;w=1260'&gt;
			&lt;div class='card-body'&gt;
			  &lt;div class='card-text'&gt;
				&lt;h3&gt;2. Lorem ipsum&lt;/h3&gt;
				&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
			  &lt;/div&gt;
			  &lt;button&gt;More...&lt;/button&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		
		&lt;div class='card'&gt;
			&lt;img src='https://images.pexels.com/photos/139248/pexels-photo-139248.jpeg?auto=compress&amp;amp;cs=tinysrgb&amp;amp;h=750&amp;amp;w=1260'&gt;
			&lt;div class='card-body'&gt;
			&lt;div class='card-text'&gt;
				&lt;h3&gt;3. Lorem ipsum&lt;/h3&gt;
				&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
			&lt;/div&gt;
			&lt;button&gt;More...&lt;/button&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		
		&lt;div class='card'&gt;
			&lt;img src='https://images.pexels.com/photos/6273/home-decoration-interior-decor.jpg?auto=compress&amp;amp;cs=tinysrgb&amp;amp;h=750&amp;amp;w=1260'&gt;
			&lt;div class='card-body'&gt;
			  &lt;div class='card-text'&gt;
				&lt;h3&gt;4. Lorem ipsum&lt;/h3&gt;
				&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
			  &lt;/div&gt;
			  &lt;button&gt;More...&lt;/button&gt;
			&lt;/div&gt;
		&lt;/div&gt;
		
		&lt;div class='card'&gt;
			&lt;img src='https://images.pexels.com/photos/924675/pexels-photo-924675.jpeg?auto=compress&amp;amp;cs=tinysrgb&amp;amp;h=750&amp;amp;w=1260'/&gt;
			&lt;div class='card-body'&gt;
			  &lt;div class='card-text'&gt;
				&lt;h3&gt;5. Lorem ipsum&lt;/h3&gt;
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
				Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
				when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
				It has survived not only five centuries, but also the leap into electronic typesetting, 
				remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
				sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
				like Aldus PageMaker including versions of Lorem Ipsum.In porttitor porta mi pharetra tempor.&lt;/p&gt;
			  &lt;/div&gt;
			  &lt;button&gt;More...&lt;/button&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div style=&quot;clear: both;&quot;&gt;&lt;/div&gt;
	&lt;footer&gt;&lt;p&gt;CSS Horizontal Card - &amp;copy; 2019&lt;/p&gt;&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba. Semoga bermanfaat.

Membuat Spiner svg dengan CSS

Leave a reply

Spinner svg

Untuk menampilkan animasi lingkaran berputar saat menunggu proses di web sebaiknya kita gunakan html tag karena lebih ringan dari pada menggunakan file gif. Elemen HTML SVG (Scalable Vector Graphics) dapat menampilkan bentuk gambar lingkaran , persegi , poligon atau lainnya.
Kita akan memanfaatkannya untuk membuat animasi lingkaran berputar dengan rule CSS @keyframes animation.

Berikut coding selengkapnya.

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;/&gt;
  &lt;title&gt;Spinner&lt;/title&gt;
  &lt;style&gt;
  @keyframes spin {to {stroke-dashoffset:-260;}}/* minus = searah jarum jam */
  .spinner circle {
    fill: #ffff00; /* warna lingkaran */
    stroke: #ff0000; /* warna garis */
    stroke-width: 15; /* tebal garis */
    stroke-linecap: round; /* bentuk ujung garis */
    stroke-dasharray: 0, 0, 80, 50;  /* garis putus */
    stroke-dashoffset: 0; /* tempat mulai putus */
    animation: spin 1s infinite linear; /* kecepatan putar 1 detik */
  }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h3&gt;Membuat Spiner svg dengan CSS&lt;/h3&gt;  
  &lt;svg class=&quot;spinner&quot; viewBox=&quot;0 0 100 100&quot; width=&quot;25&quot; height=&quot;25&quot;&gt;
    &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;40&quot; transform=&quot;rotate(-90,50,50)&quot; /&gt;
  &lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba. Semoga bermanfaat.

Membuat Tabel Responsive

Leave a reply

Untuk menampilkan tabel yang panjang diperangkat mobile dengan layar kecil tentu akan menyulitkan kita untuk melihatnya. Kita akan membuat tampilan tabel dengan banyak kolom menjadi baris secara responsive mengikuti ukuran layar smartphone seperti pada gambar di atas.

Berikut coding selengkapnya.

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;title&gt;Responsive Table&lt;/title&gt;
  &lt;style&gt;
  	table,th,td {border-collapse:collapse;font:12px verdana;border:1px #c0c0c0 solid;color:#808080;}
	table tr:hover td {background:#BBDEFB;}
	table th {background-color:#BBDEFB;color:#1a73eb;padding:8px;}
	table tr:nth-child(odd) {background-color:#E3F2FD;}
	@media only screen and (max-width:500px)  {
		table,thead,tbody,th,td,tr{display:block;}
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		tr {margin:0 0 1rem 0;}
		td {
			position: relative;
			padding-left: 160px;
		}
		td:before {
			position: absolute;
			top: 0;
			left: 6px;
			width: 25%;
			padding-right: 10px;
			white-space: nowrap;
			color:#1a73eb;
		}
		td:nth-of-type(1):before { content: &quot;No.&quot;; }
		td:nth-of-type(2):before { content: &quot;Nama&quot;; }
		td:nth-of-type(3):before { content: &quot;Versi&quot;; }
		td:nth-of-type(4):before { content: &quot;Tanggal Rilis&quot;; }
		td:nth-of-type(5):before { content: &quot;Versi Kernel Linux&quot;; }
		td:nth-of-type(6):before { content: &quot;Level API&quot;; }
		td:nth-of-type(7):before { content: &quot;Fitur&quot;; }
	}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Table Responsive&lt;/h1&gt;
&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
    &lt;th&gt;No.&lt;/th&gt;
    &lt;th&gt;Nama&lt;/th&gt;
    &lt;th&gt;Versi Android&lt;/th&gt;
    &lt;th&gt;Tanggal Rilis&lt;/th&gt;
	&lt;th&gt;Versi Kernel Linux&lt;/th&gt;
	&lt;th&gt;Level API&lt;/th&gt;
	&lt;th&gt;Fitur&lt;/th&gt;
	&lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
    &lt;td&gt;Froyo&lt;/td&gt;
    &lt;td&gt;2.2&lt;/td&gt;
    &lt;td&gt;10 Mei 2010&lt;/td&gt;
	&lt;td&gt;?&lt;/td&gt;
	&lt;td&gt;8&lt;/td&gt;
	&lt;td&gt;USB tethering and Wi-Fi hotspot functionality&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;2&lt;/td&gt;
    &lt;td&gt;Gingerbread&lt;/td&gt;
    &lt;td&gt;2.3&lt;/td&gt;
    &lt;td&gt;6 Desember 2010&lt;/td&gt;
	&lt;td&gt;2.6.35&lt;/td&gt;
	&lt;td&gt;9-10&lt;/td&gt;
	&lt;td&gt;Support for Near Field Communication (NFC)&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;3&lt;/td&gt;
    &lt;td&gt;Honeycomb&lt;/td&gt;
    &lt;td&gt;3.0&lt;/td&gt;
    &lt;td&gt;22 Februari 2011&lt;/td&gt;
	&lt;td&gt;2.6.36&lt;/td&gt;
	&lt;td&gt;11-13&lt;/td&gt;
	&lt;td&gt;Increased ability of applications to access files on the SD card&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;
    &lt;td&gt;Ice Cream Sandwich&lt;/td&gt;
    &lt;td&gt;4.0&lt;/td&gt;
    &lt;td&gt;19 Oktober 2011&lt;/td&gt;
	&lt;td&gt;3.0.1&lt;/td&gt;
	&lt;td&gt;14-15&lt;/td&gt;
	&lt;td&gt;Improvements to graphics, databases, spell-checking and Bluetooth functionality&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;5&lt;/td&gt;
    &lt;td&gt;Jelly Bean&lt;/td&gt;
    &lt;td&gt;4.1&lt;/td&gt;
    &lt;td&gt;9 Juli 2012&lt;/td&gt;
	&lt;td&gt;3.0.31-39&lt;/td&gt;
	&lt;td&gt;16-18&lt;/td&gt;
	&lt;td&gt;Bluetooth Audio/Video Remote Control Profile (AVRCP) 1.3 support&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;6&lt;/td&gt;
    &lt;td&gt;Kitkat&lt;/td&gt;
    &lt;td&gt;4.4&lt;/td&gt;
    &lt;td&gt;31 Oktober 2013&lt;/td&gt;
	&lt;td&gt;3.10&lt;/td&gt;
	&lt;td&gt;19-20&lt;/td&gt;
	&lt;td&gt;UI updates for Google Maps navigation and alarmsv&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;7&lt;/td&gt;
    &lt;td&gt;Lollipop&lt;/td&gt;
    &lt;td&gt;5.0&lt;/td&gt;
    &lt;td&gt;12 November 2014&lt;/td&gt;
	&lt;td&gt;3.16&lt;/td&gt;
	&lt;td&gt;21-22&lt;/td&gt;
	&lt;td&gt;Ability to join Wi-Fi networks and control paired Bluetooth devices from quick settings&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;8&lt;/td&gt;
    &lt;td&gt;Marshmallow&lt;/td&gt;
    &lt;td&gt;6.0&lt;/td&gt;
    &lt;td&gt;28 Mei 2015&lt;/td&gt;
	&lt;td&gt;3.18&lt;/td&gt;
	&lt;td&gt;23&lt;/td&gt;
	&lt;td&gt;Doze mode, which reduces CPU speed while the screen is off in order to save battery life&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;9&lt;/td&gt;
    &lt;td&gt;Nougat&lt;/td&gt;
    &lt;td&gt;7.0&lt;/td&gt;
    &lt;td&gt;22 Agustus 2016&lt;/td&gt;
	&lt;td&gt;4.4&lt;/td&gt;
	&lt;td&gt;24-25&lt;/td&gt;
	&lt;td&gt;Touch/display performance improvements&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;10&lt;/td&gt;
    &lt;td&gt;Oreo&lt;/td&gt;
    &lt;td&gt;8.0&lt;/td&gt;
    &lt;td&gt;21 Agustus 2017&lt;/td&gt;
	&lt;td&gt;4.10&lt;/td&gt;
	&lt;td&gt;26-27&lt;/td&gt;
	&lt;td&gt;Bluetooth battery level for connected devices, accessible in Quick Settings&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba. Semoga bermanfaat.

Tombol Switch dengan CSS

Leave a reply

Kali ini kita akan mencoba membuat tombol geser kiri kanan (switch button) dengan menggunakan CSS lalu mengambil statusnya dengan javascript.
Kita manfaatkan properti CSS: ‘appearance’ pada elemen input checkbox untuk manipulasi tampilan field checkbox biasa menjadi tombol geser.
Kita juga menfaatkan pseudo-element ‘:before’ untuk manipulasi tampilan content di dalam tombol switch.

Berikut coding selengkapnya.

&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
	&lt;title&gt;CSS Switch Botton&lt;/title&gt;
	&lt;style&gt;
	.toggle {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  width: 98px;
	  height: 30px;
	  position: relative;
	  border-radius: 20px;
	  display: inline-block;
	  overflow: hidden;
	  outline: none;
	  border: none;
	  cursor: pointer;
	  background-color: #707070;
	  transition: background-color ease 0.3s;
	}
	.toggle:before {
	  content: &quot;Depan Belakang&quot;;
	  display: block;
	  position: absolute;
	  z-index: 2;
	  width: 25px;
	  height: 25px;
	  background: #fff;
	  left: 2px;
	  top: 2px;
	  border-radius: 50%;
	  font:bold 12px/28px Helvetica;
	  text-indent: -40px;
	  word-spacing: 30px;
	  color: #fff;
	  text-shadow: -1px -1px rgba(0,0,0,0.15);
	  white-space: nowrap;
	  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
	}
	.toggle:checked {background: #4CD964;}
	.toggle:checked:before {left:70px;}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2 id=&quot;status&quot;&gt;Belakang&lt;/h2&gt;
&lt;input id=&quot;swbtn&quot; class=&quot;toggle&quot; type=&quot;checkbox&quot; /&gt;
&lt;script&gt;
	let swbtn = document.getElementById(&quot;swbtn&quot;);
	let status = document.getElementById(&quot;status&quot;);
	swbtn.addEventListener(&quot;click&quot;, function(){
		if (swbtn.checked) {
			status.innerHTML = &quot;Depan&quot;;
		} else if (!swbtn.checked)	{
			status.innerHTML = &quot;Belakang&quot;;
		}
	});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba. Semoga bermanfaat.

Sumber: https://danklammer.com/articles/simple-css-toggle-switch/

Sort dan Search Data Tabel

Leave a reply

JSSortSearchData

Fitur pengurutan (sort) data dan pencarian (search) data merupakan fitur yang umum diperlukan dalam aplikasi web. Kita bisa membuatnya dengan bantuan library seperti jquery dan datatables.
Kali ini saya akan memberikan cara membuat fitur sort dan search data dalam table menggunakan fungsi javascript tanpa library.

Ada 2 fungsi yang kita buat:

  • fungsi searchTable()
  • fungsi sortTable(), yang dapat melakukan sort data huruf (alphabet), angka (numeric) dan tanggal (date)

Fungsi resetHeader() digunakan untuk mengembalikan kolom header tabel supaya ketika kolom header di click, tanda panah ke atas ↑ (sort ascending) atau ke bawah ↓ (sort descending)  hanya tampil di kolom yang di click. Header kolom disimpan dalam variable array headerCol.

Berikut coding selengkapnya.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;/&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;title&gt;Sort Search Data in Table&lt;/title&gt;
&lt;style&gt;
html,body{font:12px Arial,Helvetica,sans-serif;}
.cari {padding:5px;border:1px solid #ddd;}
#table1 {border-collapse:collapse;}
#table1 th {padding:12px;text-align:center;background-color:#f0f0f0;cursor:pointer;}
#table1 th, #table1 td {border:1px solid #ddd;padding:6px;}
#table1 tr:nth-child(odd){background-color: #f1f1f1;}
#table1 tr:hover {background-color:#f8f8f8;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;Tabel Versi Android&lt;/h2&gt;
&lt;p&gt;&lt;input type=&quot;text&quot; id=&quot;1&quot; class=&quot;cari&quot; onkeyup=&quot;searchTable(1)&quot; size=&quot;10&quot; placeholder=&quot;Cari Nama...&quot;&gt;
&lt;input type=&quot;text&quot; id=&quot;3&quot; class=&quot;cari&quot; onkeyup=&quot;searchTable(3)&quot; size=&quot;10&quot; placeholder=&quot;Cari Rilis...&quot;&gt;&lt;/p&gt;
&lt;table id=&quot;table1&quot;&gt;
  &lt;tr&gt;
    &lt;th onclick=&quot;sortTable('num',0)&quot;&gt;No.&lt;/th&gt;
	&lt;th onclick=&quot;sortTable('alfa',1)&quot;&gt;Nama&lt;/th&gt;
    &lt;th onclick=&quot;sortTable('num',2)&quot;&gt;Versi&lt;/th&gt;
    &lt;th onclick=&quot;sortTable('date',3)&quot;&gt;Rilis&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;1&lt;/td&gt;
	&lt;td&gt;Froyo&lt;/td&gt;
    &lt;td&gt;2.2&lt;/td&gt;
    &lt;td&gt;10 May 2010&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;2&lt;/td&gt;
	&lt;td&gt;Gingerbread&lt;/td&gt;
    &lt;td&gt;2.3&lt;/td&gt;
    &lt;td&gt;6 Dec 2010&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;3&lt;/td&gt;
	&lt;td&gt;Honeycomb&lt;/td&gt;
    &lt;td&gt;3.0&lt;/td&gt;
    &lt;td&gt;22 Feb 2011&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;4&lt;/td&gt;
	&lt;td&gt;Ice Cream Sandwich&lt;/td&gt;
    &lt;td&gt;4.0&lt;/td&gt;
    &lt;td&gt;19 Oct 2011&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;5&lt;/td&gt;
	&lt;td&gt;Jelly Bean&lt;/td&gt;
    &lt;td&gt;4.1&lt;/td&gt;
    &lt;td&gt;9 Jul 2012&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;6&lt;/td&gt;
	&lt;td&gt;Kitkat&lt;/td&gt;
    &lt;td&gt;4.4&lt;/td&gt;
    &lt;td&gt;31 Oct 2013&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;7&lt;/td&gt;
	&lt;td&gt;Lollipop&lt;/td&gt;
    &lt;td&gt;5.0&lt;/td&gt;
    &lt;td&gt;12 Nov 2014&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;8&lt;/td&gt;
	&lt;td&gt;Marshmallow&lt;/td&gt;
    &lt;td&gt;6.0&lt;/td&gt;
    &lt;td&gt;28 May 2015&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;9&lt;/td&gt;
	&lt;td&gt;Nougat&lt;/td&gt;
    &lt;td&gt;7.0&lt;/td&gt;
    &lt;td&gt;22 Aug 2016&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;10&lt;/td&gt;
	&lt;td&gt;Oreo&lt;/td&gt;
    &lt;td&gt;8.0&lt;/td&gt;
    &lt;td&gt;21 Aug 2017&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;script&gt;
var cols = document.getElementById('table1').rows[0].cells;
var headerCol = new Array();
for (var i = 0; i &lt; (cols.length); i++) {
	headerCol[i]=cols[i].textContent;
}
	
function searchTable(col) {
  var input, filter, table, tr, td, i;
  input = document.getElementById(col);
  filter = input.value.toUpperCase();
  table = document.getElementById(&quot;table1&quot;);
  tr = table.getElementsByTagName(&quot;tr&quot;);
  for (i = 0; i &lt; tr.length; i++) {
    if(col=='1') td = tr[i].getElementsByTagName(&quot;td&quot;)[1];
	else if(col=='3') td = tr[i].getElementsByTagName(&quot;td&quot;)[3];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
        tr[i].style.display = &quot;&quot;;
      } else {
        tr[i].style.display = &quot;none&quot;;
      }
    }     
  }
}
function resetHeader(){
	var c = document.getElementById('table1').rows[0].cells;
	for (var i = 0; i &lt; (c.length); i++) {
		c[i].textContent=headerCol[i];
	}
}
function sortTable(d,n) {
  var table, rows, col_header, switching, i, x, y, a,b,shouldSwitch, dir = &quot;asc&quot;, switchcount = 0;
  table = document.getElementById(&quot;table1&quot;);
  rows = table.getElementsByTagName(&quot;tr&quot;);
  col_header  = rows[0].getElementsByTagName(&quot;th&quot;)[n];
  switching = true;
  while (switching) {
	switching = false;    
    for (i = 1; i &lt; (rows.length - 1); i++) {
		shouldSwitch = false;
		x = rows[i].getElementsByTagName(&quot;td&quot;)[n];
		y = rows[i + 1].getElementsByTagName(&quot;td&quot;)[n];
		if (d==&quot;num&quot;)
		{	a = Number(x.innerHTML);
			b = Number(y.innerHTML);
		} else if (d==&quot;alfa&quot;)
		{	a = x.innerHTML.toLowerCase();
			b = y.innerHTML.toLowerCase();
		} else if (d==&quot;date&quot;)
		{	a = Date.parse(x.innerHTML);
			b = Date.parse(y.innerHTML);
		}
		if (dir == &quot;asc&quot;) {
			if (a &gt; b) {
			  shouldSwitch = true;
			  break;
			}
		} else if (dir == &quot;desc&quot;) {
			if (a &lt; b) {
			  shouldSwitch = true;
			  break;
			}
		}
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 &amp;&amp; dir == &quot;asc&quot;) {
        dir = &quot;desc&quot;;
        switching = true;
      }
    }	
  }
  resetHeader();
  if (dir == &quot;asc&quot;) {col_header.textContent =  headerCol[n] + &quot; \u2191&quot;;}
  if (dir == &quot;desc&quot;) {col_header.textContent = headerCol[n] + &quot; \u2193&quot;;}
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

 Selamat mencoba dan semoga bermanfaat.

Send HTML Email dengan Attachment

Leave a reply

Pada posting saya terdahulu tentang cara mengirim email dengan form di PHP, kali ini saya akan sharing tentang cara mengirim email dengan attachment yang diambil langsung dari local.
Berikut ini coding lengkapnya.

&lt;?php
$from = &quot;Amir &lt;amir@gmail.com&gt;&quot;;
$to = &quot;budi@yahoo.com , cica@hotmail.com&quot;;
$subject = &quot;Ini File Excelnya&quot;;
$message = &quot;&lt;b&gt;Terlampir file excel&lt;/b&gt;&lt;br/&gt;Thanks.&quot;;
$filename = &quot;Dummy File1.xls&quot;;
	
$uid = md5(uniqid(time()));
$header = &quot;From: &quot;.$from.&quot;\r\n&quot;;
$header .= &quot;Reply-To: &quot;.$from.&quot;\r\n&quot;;
$header .= &quot;MIME-Version: 1.0\r\n&quot;;

if (file_exists($filename))
{ $header .= &quot;Content-Type:multipart/mixed; boundary=\&quot;&quot;.$uid.&quot;\&quot;\r\n\r\n&quot;;
  $nmessage = &quot;--&quot;.$uid.&quot;\r\n&quot;;
  $nmessage .= &quot;Content-type:text/html; charset=\&quot;UTF-8\&quot;\r\n&quot;;
  $nmessage .= &quot;Content-Transfer-Encoding:quoted-printable\r\n\r\n&quot;;
  $nmessage .= $message.&quot;\r\n\r\n&quot;;
  $nmessage .= &quot;--&quot;.$uid.&quot;\r\n&quot;;
  $content = chunk_split(base64_encode(file_get_contents($filename)));
  $nmessage .= &quot;Content-Type:application/octet-stream; name=\&quot;&quot;.$filename.&quot;\&quot;\r\n&quot;;
  $nmessage .= &quot;Content-Transfer-Encoding:base64\r\n&quot;;
  $nmessage .= &quot;Content-Disposition:attachment; filename=\&quot;&quot;.$filename.&quot;\&quot;\r\n\r\n&quot;;
  $nmessage .= $content.&quot;\r\n\r\n&quot;;
  $nmessage .= &quot;--&quot;.$uid.&quot;--&quot;;
  $message = $nmessage;
} else {
  $header .= &quot;Content-Type:text/html; boundary=\&quot;&quot;.$uid.&quot;\&quot;\r\n\r\n&quot;;
}
	
if (mail($to, $subject, $message, $header)) {
  echo '&lt;p&gt;Mail has been sent! &lt;br /&gt;Please check both inbox and spam folder! &lt;/p&gt;'; 
} else {
  echo '&lt;p&gt;Mail can not be sent! Please try again later! &lt;/p&gt;';
}

Anda bisa mengirimkan pesan email dengan format HTML pada variable $message.
Panjang pesan bisa lebih dari 1000 karakter, termasuk tag HTML-nya.

Jika tidak ingin mengirimkan file attachment Anda cukup kosongkan variable $filename=”;

Silakan Anda pakai coding ini di aplikasi php Anda. Selamat mencoba dan semoga sukses.

Membuat Tooltip yang Mengikuti Pointer Mouse

Leave a reply

tooltips

Sekarang kita coba membuat tooltip seperti gambar di atas. Yang membuat saya tertarik adalah tooltip ini bisa bergerak mengikuti gerakan pointer mouse di sepanjang text link.

Tampilan kotak tooltip kita buat dengan menggunakan CSS lalu untuk menggerakan kotak tersebut kita pakai javascript

&lt;script&gt;
var tooltip = document.querySelectorAll('.tooltip');
document.addEventListener('mousemove', fn, false);
function fn(e) {
  for (var i = tooltip.length; i--;) {
    tooltip[i].style.left = e.pageX + 'px';
    tooltip[i].style.top = e.pageY + 'px';
  }
}
&lt;/script&gt;

Untuk coding lengkapnya silakan coba di bawah ini.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;CSS Tooltip&lt;/title&gt;
  &lt;style&gt;
	a:hover .tooltip 
	{ display: block; }
	.tooltip {
	  display: none;
	  position: absolute;
	  z-index: 1000;
	  margin: 15px;
	  border:2px solid #0094ff;
	  border-radius: 8px 8px 0 0;
	  width:400px;
	  font: 12px Arial;
	}
	.tooltip h3 {
	  background:#0094ff;
	  color:#ffffff;
	  margin:0;
	  padding:8px;
	}
	.tooltip p {
	  background:#f0f0f0;
	  color:#000000;
	  margin:0;padding:8px; 
	}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href=&quot;#&quot; &gt;Ini adalah link dengan tooltip mengikuti pointer mouse
&lt;div class=&quot;tooltip&quot;&gt;
    &lt;h3&gt;Contoh Teks Lorem Ipsum yang Lazim Digunakan&lt;/h3&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	Ut enim ad minim veniam, quis nostrud exercitation ullamco
	laboris nisi ut aliquip ex ea commodo consequat. 
	Duis aute irure dolor in reprehenderit in voluptate 
	velit esse cillum dolore eu fugiat nulla pariatur. 
	Excepteur sint occaecat cupidatat non proident, 
	sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt; 

&lt;script&gt;
var tooltip = document.querySelectorAll('.tooltip');
document.addEventListener('mousemove', fn, false);
function fn(e) {
  for (var i = tooltip.length; i--;) {
    tooltip[i].style.left = e.pageX + 'px';
    tooltip[i].style.top = e.pageY + 'px';
  }
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba, semoga sukses.

Membuat Slideshow dengan CSS3

Leave a reply

Hampir di setiap website kita temui slideshow. Kali ini saya berikan contoh membuat slideshow yang sangat simple hanya dengan menggunakan CSS, tanpa javascript.

CSS3 memiliki property “animation” yang akan kita gunakan untuk mengganti 1 gambar dengan gambar lainnya.

Pertama kita berikan nama animation : slideshow
dengan durasi: 9 detik (3 gambar masing masing tampil 3 detik)
dan kecepatan tiap slide berjalan sama atau linear.
Supaya slideshow ini jalan terus maka kita berikan animation-iteration-count: infinite.

img {
 animation-name: slideshow;
 animation-duration: 9s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}

4 baris property “animation” poada css tersebut bisa kita singkat penulisannya (shorthand CSS) menjadi:
animation: slideshow 9s linear 0s infinite;

Kemudian kita buat @Keyframes untuk animation-name: slideshow untuk memberikan efek transisi antar gambar tersebut.

@keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;}
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}

Berikut coding selengkapnya.

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Slideshow CSS3&lt;/title&gt;
&lt;style&gt;
div {margin: 100px 200px; }
img {
  position: absolute;
  z-index: 3;
  animation: slideshow 9s linear 0s infinite;
}
img:nth-child(2) {
  z-index: 2;
  animation: slideshow 9s linear 3s infinite;
}
img:nth-child(3) {
   z-index: 1;
  animation: slideshow 9s linear 6s infinite;
}
@keyframes slideshow {
   25% { opacity: 1;}
   33.33% { opacity: 0;}
   91.66% { opacity: 0;}
   100% { opacity: 1;}
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
	&lt;img src=&quot;images/img_1.jpg&quot; alt=&quot;Gambar 1&quot;/&gt;
	&lt;img src=&quot;images/img_2.jpg&quot; alt=&quot;Gambar 2&quot;/&gt;
	&lt;img src=&quot;images/img_3.jpg&quot; alt=&quot;Gambar 3&quot;/&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Membuat Popup Window dengan CSS

Leave a reply

modal-box-dengan-css

Bagaimana cara membuat popup window tanpa javascript?
Kita bisa membuat modal dialog box atau yang dikenal popup window hanya dengan menggunakan CSS3 dan HTML5
Berikut ini codingnya :

&lt;!DOCTYPE html&gt;
&lt;head&gt;
	&lt;title&gt;Modal box dengan CSS3&lt;/title&gt;
	&lt;style&gt;
	.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		transition: opacity 200ms ease-in;
		pointer-events: none;
	}
	.modalDialog:target {opacity:1;	pointer-events: auto;}
	.modalDialog &gt; div {
		width: 400px;
		position: relative;
		margin: 10% auto;
		padding: 5px 20px 13px 20px;
		border-radius: 10px;
		background: #fff;
		background: linear-gradient(#fff, #aaa);
	}
	.close:hover { background:#00d9ff; }
	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		text-align: center;
		top: -10px;
		right: -12px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		border-radius: 12px;
		box-shadow: 1px 1px 3px #000;
	}
	
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
span.psw {
    float: right;
}

	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;&lt;a href=&quot;#openModal&quot;&gt;Open Modal&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;#iklan&quot;&gt;IKLAN&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;#login&quot;&gt;Login&lt;/a&gt;&lt;/p&gt;


&lt;div id=&quot;openModal&quot; class=&quot;modalDialog&quot;&gt;
	&lt;div&gt;
		&lt;a href=&quot;#&quot; title=&quot;Close&quot; class=&quot;close&quot;&gt;X&lt;/a&gt;
		&lt;h2&gt;Perhatian!&lt;/h2&gt;
		&lt;p&gt;Ini adalah contoh kotak dialog modal yang dibuat hanya dengan menggunakan CSS3 saja, tanpa javascript.&lt;/p&gt;
		&lt;p&gt;Silakan diubah sesuai kebutuhan, seperti membuat iklan pop-up yang tampil saat website terbuka,
		atau membuat form login/register user.&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div id=&quot;iklan&quot; class=&quot;modalDialog&quot;&gt;
	&lt;div&gt;
		&lt;a href=&quot;#&quot; title=&quot;Close&quot; class=&quot;close&quot;&gt;X&lt;/a&gt;
		&lt;h3&gt;Dapatkan Buku Proyek PHP &amp; MySQL :&lt;/h3&gt; 
		&lt;h2&gt;&quot;Membuat Helpdesk System Berbasis OOP dan PDO dengan PHP&quot;&lt;/h2&gt;
		&lt;p&gt;di toko buku online Lokomedia&lt;br/&gt;
		Harga: Rp 50.000,-&lt;/p&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;div id=&quot;login&quot; class=&quot;modalDialog&quot;&gt;
	&lt;div&gt;
		&lt;a href=&quot;#&quot; title=&quot;Close&quot; class=&quot;close&quot;&gt;X&lt;/a&gt;
		&lt;h3&gt;Please Log in&lt;/h3&gt; 
		&lt;form  action=&quot;action_page.php&quot;&gt;
		&lt;label&gt;&lt;b&gt;Username&lt;/b&gt;&lt;/label&gt;
		&lt;input type=&quot;text&quot; placeholder=&quot;Enter Username&quot; name=&quot;uname&quot; required&gt;
		&lt;label&gt;&lt;b&gt;Password&lt;/b&gt;&lt;/label&gt;
		&lt;input type=&quot;password&quot; placeholder=&quot;Enter Password&quot; name=&quot;psw&quot; required&gt;
		&lt;button type=&quot;submit&quot;&gt;Log in&lt;/button&gt;
		&lt;input type=&quot;checkbox&quot; id=&quot;Remember&quot; checked=&quot;checked&quot;&gt; &lt;label for=&quot;Remember&quot;&gt;Remember me&lt;/label&gt;
		&lt;span class=&quot;psw&quot;&gt;&lt;a href=&quot;#login&quot;&gt;Forgot password?&lt;/a&gt;&lt;/span&gt;
	&lt;/form&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba, semoga sukses.

Membuat Table dengan CSS dan tag DIV

Leave a reply

css table div

css table div

Selain menggunakan HTML tag <table>, Anda juga dapat membuat table dengan menggunakan tag <div> dan CSS.

CSS menyediakan atribut display:table untuk menampilkan element HTML berbentuk table.

Berikut ini coding selengkapnya:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS Table Div&lt;/title&gt;
&lt;style&gt;
html,body{font:14px arial,verdana,san-serif;}
.container{
    display:table;
    width:400px;
    border-collapse:collapse;
	margin:0 auto;
	line-height:25px;
}
.table-row:hover{background-color:#99ccff;}
.heading{
    font-weight:bold;
    display:table-row;
    background-color:#C91622;
    text-align:center;
    line-height:35px;
    color:#ffffff;
}
.table-row{  
    display:table-row;
    text-align:center;
}
.strip{  
    display:table-row;
    text-align:center;
	background-color:#f0f0f0;
}
.col{ 
	display:table-cell;
 	border:1px solid #CCC;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Membuat Table dengan CSS dan tag DIV&lt;/h1&gt;
&lt;hr/&gt;&lt;br/&gt;
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;heading&quot;&gt;
		&lt;div class=&quot;col&quot;&gt;No.&lt;/div&gt;
		&lt;div class=&quot;col&quot;&gt;Browser&lt;/div&gt;
    &lt;/div&gt;
	&lt;div class=&quot;table-row&quot;&gt;
		&lt;div class=&quot;col&quot;&gt;1&lt;/div&gt;
		&lt;div class=&quot;col&quot;&gt;IE&lt;/div&gt;
    &lt;/div&gt;
	&lt;div class=&quot;table-row strip&quot;&gt;
        &lt;div class=&quot;col&quot;&gt;2&lt;/div&gt;
		&lt;div class=&quot;col&quot;&gt;Firefox&lt;/div&gt;
    &lt;/div&gt;
	&lt;div class=&quot;table-row&quot;&gt;
        &lt;div class=&quot;col&quot;&gt;3&lt;/div&gt;
		&lt;div class=&quot;col&quot;&gt;Chrome&lt;/div&gt;
    &lt;/div&gt;
	&lt;div class=&quot;table-row strip&quot;&gt;
        &lt;div class=&quot;col&quot;&gt;4&lt;/div&gt;
		&lt;div class=&quot;col&quot;&gt;Opera&lt;/div&gt;
    &lt;/div&gt;
	&lt;div class=&quot;table-row&quot;&gt;
        &lt;div class=&quot;col&quot;&gt;5&lt;/div&gt;
		&lt;div class=&quot;col&quot;&gt;Safari&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Silakan mencoba.

 

 

Selected Table Row dengan CSS

Leave a reply

Selected Table Row dengan CSS

Selected Table Row dengan CSS

Table hover sudah pernah kita bahas dan kali ini saya berikan cara supaya kita bisa click baris-baris pada table. Selain warna yang berubah pada baris di tunjuk oleh pointer mouse, kita juga bisa di click beberapa baris untuk memilihnya (selected table row).

Hal ini dapat dilakukan dengan menggunakan fungsi javascript querySelectorAll() dan addEventListener().
Berikut ini coding selengkapnya:

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS Select Table Row&lt;/title&gt;
&lt;style&gt;
.mytable,th,td{border:1px solid #ffffff;border-collapse:collapse;font:12px verdana,arial,sans-serif;}
.mytable th {background:#000099;color:#ffffff;padding:10px;font-weight:bold;}
.mytable td {padding:8px;}
.mytable tr {background:#f0f0f0;}
.mytable tr:hover td {background:#c0c0c0;}
.mytable tr.selected {background: #00aacc;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table class=&quot;mytable&quot;&gt;
    &lt;tbody&gt;
        &lt;tr&gt;&lt;th&gt;No.&lt;/th&gt;&lt;th width=&quot;200&quot;&gt;Table Head 1&lt;/th&gt;&lt;th width=&quot;200&quot;&gt;Table Head 2&lt;/th&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;/tr&gt;
	&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;/tr&gt;
	&lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;/tr&gt;
	&lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;/tr&gt;
	&lt;tr&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;td&gt;content&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var trs = document.querySelectorAll(&quot;tr&quot;);
for (var i = 0; i &lt; trs.length; i++) {
    trs[i].addEventListener(&quot;click&quot;, function() 
    {   if(this.className.indexOf(&quot;selected&quot;) == 0)
            this.className = &quot;&quot;;
        else 
            this.className = &quot;selected&quot;;
    });
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba, semoga sukses.

Membuat Tombol Push Botton untuk Link href dengan CSS

Leave a reply

Link Berbentuk Tombol

Link Berbentuk Tombol

Umumnya kita membuat html link (tag a href) berbentuk text yang bisa di click. nah… disini saya akan berikan cara membuat supaya link (a href) berbentuk tombol seperti html tag input atau tag botton dengan menggunakan CSS3.

Berikut ini coding HTMM dan CSS untuk membuat tombol Push Botton untuk Link href dengan CSS:


&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Tombol Link&lt;/title&gt;
&lt;style&gt;
a.tombol {
   background-color:#b0b0b0;
   font:bold 20px arial,sans-serif;
   text-decoration:none;
   color:#fff;
   margin:5px;
   position:relative;
   padding:10px 20px;
   border-radius: 5px;
   box-shadow: inset 0px 1px 0px #a0a0a0,
                     0px 3px 0px 0px #808080,
                     0px 5px 3px #999;}
a.tombol:active {
   background-color:#ff0000; top:3px;
   box-shadow: inset 0px 1px 0px #a0a0a0,
                     0px 1px 0px 0px #808080,
                     0px 1px 3px #999;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;Membuat Tombol Push Botton&lt;br/&gt;
untuk Link href dengan CSS&lt;/h2&gt;
&lt;hr align=&quot;left&quot; width=&quot;200&quot;/&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=1&quot;&gt;1&lt;/a&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=2&quot;&gt;2&lt;/a&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=3&quot;&gt;3&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=4&quot;&gt;4&lt;/a&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=5&quot;&gt;5&lt;/a&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=6&quot;&gt;6&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=7&quot;&gt;7&lt;/a&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=8&quot;&gt;8&lt;/a&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=9&quot;&gt;9&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=*&quot;&gt;*&lt;/a&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=0&quot;&gt;0&lt;/a&gt;
&lt;a class=&quot;tombol&quot; href=&quot;?t=#&quot;&gt;#&lt;/a&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
&lt;hr align=&quot;left&quot; width=&quot;200&quot;/&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba, semoga berhasil.

Membaca Email dengan PHP

Leave a reply

Email IMAP

Membaca Email dengan PHP

PHP memiliki fungsi untuk mengambil dan membaca email melalui internet protokol POP3 dan IMAP. Port yang kita gunakan untuk itu adalah 993 (IMAP SSL)
Fungsi-fungsi yang digunakan adalah:

imap_open($hostname,$username,$password);
imap_fetch_overview($mbox,”1:$MN”,0);
imap_header($mbox, $msg);

Coding berikut ini menampilkan semua email dari GMail Anda, seperti pada gambar di atas.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Baca Email&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
#mytable {width:800px;border:1px #a9c6c9 solid;font:12px verdana,arial,sans-serif;color:#333333;}
#mytable td {padding:8px;}
#mytable tr:hover td {background:#a0a0a0;color:#ffffff;}
#mytable th {background-color:#000099;color:#ffffff;padding:8px; }
#mytable tr:nth-child(odd) {background-color:#c0c0c0;}
#mytable tr:nth-child(even) {background-color:#f0f0f0;}
&lt;/style&gt;
&lt;script type=&quot;text/javaScript&quot;&gt;
function buka(url)
{newwindow = window.open(url, '_blank', &quot;status=yes, height=300, width=400, resizeable=yes&quot;);}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;?php
$hostname = '{imap.gmail.com:993/ssl/novalidate-cert}[Gmail]/All Mail';
$username = 'your_email@gmail.com';
$password = 'your_gmail_password';
$mbox = imap_open($hostname,$username,$password) or die('Cannot connect to mail server: ' . imap_last_error());
$MC=imap_check($mbox);
$MN=$MC-&gt;Nmsgs;
$overview=imap_fetch_overview($mbox,&quot;1:$MN&quot;,0);
$size=sizeof($overview);
echo &quot;&lt;h1&gt;Baca Email&lt;/h1&gt;
	&lt;table id='mytable'&gt;
	&lt;tr&gt;&lt;th&gt;Msg_Id&lt;/th&gt;&lt;th&gt;From&lt;/th&gt;&lt;th&gt;Email&lt;/th&gt;&lt;th&gt;Date&lt;/th&gt;&lt;th&gt;Subject&lt;/th&gt;&lt;th&gt;Size&lt;/th&gt;&lt;/tr&gt;&quot;;
for($i=$size-1;$i&gt;=0;$i--)
{	$val=$overview[$i];
	$msg=$val-&gt;msgno;
	$date=date('Y-m-d H:i:s', strtotime($val-&gt;date));
	$subj=isset($val-&gt;subject)?$val-&gt;subject:&quot;(no subject)&quot;;
	$header = imap_header($mbox, $msg);
	$from = $header-&gt;from;
	$email_size = $val-&gt;size;
	foreach ($from as $id =&gt; $object) 
	{	$fromname = isset($object-&gt;personal)?$object-&gt;personal:$object-&gt;mailbox;
		$fromaddress = $object-&gt;mailbox . &quot;@&quot; . $object-&gt;host;
	}
	echo &quot;&lt;tr onclick=\&quot;buka('read_email.php?msgno=$msg&amp;msgdate=$date&amp;msgfrom=$fromname&amp;msgemail=$fromaddress&amp;msgsubj=$subj');\&quot;&gt;
		&lt;td&gt;$msg&lt;/td&gt; &lt;td&gt;$fromname&lt;/td&gt; &lt;td&gt;$fromaddress&lt;/td&gt; &lt;td&gt;$date&lt;/td&gt; &lt;td&gt;$subj&lt;/td&gt;&lt;td&gt;$email_size&lt;/td&gt;&lt;/tr&gt;&quot;;
}
echo &quot;&lt;/table&gt;&quot;;
imap_close($mbox);
?&gt;
&lt;/body&gt;
&lt;/html&gt;

Anda dapat click baris pada table-nya untuk membaca isi email Anda pada window browser baru.

Berikut ini coding untuk membaca isi email Anda

&lt;?php
function get_mime_type(&amp;$structure)
{   $primary_mime_type = array(&quot;TEXT&quot;, &quot;MULTIPART&quot;, &quot;MESSAGE&quot;, &quot;APPLICATION&quot;, &quot;AUDIO&quot;, &quot;IMAGE&quot;, &quot;VIDEO&quot;, &quot;OTHER&quot;);
    if($structure-&gt;subtype) {return $primary_mime_type[(int) $structure-&gt;type] . '/' . $structure-&gt;subtype;}
    return &quot;TEXT/PLAIN&quot;;
}
function get_part($stream, $msg_number, $mime_type, $structure = false, $part_number = false)
{   if (!$structure) {$structure = imap_fetchstructure($stream, $msg_number);}
    if($structure)
    {   if($mime_type == get_mime_type($structure))
        {   if(!$part_number) {$part_number = &quot;1&quot;;}
            $text = imap_fetchbody($stream, $msg_number, $part_number);
            if($structure-&gt;encoding == 3) {return imap_base64($text);}
			else if ($structure-&gt;encoding == 4) {return imap_qprint($text);}
			else {return $text;}
        }
        if ($structure-&gt;type == 1) /* multipart */
        {   while (list($index, $sub_structure) = each($structure-&gt;parts))
            {   if ($part_number) {$prefix = $part_number . '.';}
                $data = get_part($stream, $msg_number, $mime_type, $sub_structure, $prefix . ($index + 1));
                if ($data) {return $data;}
            }
        }
    }
    return false;
}
$msg_number = $_GET['msgno'];
$msg_from = $_GET['msgfrom'];
$msg_email = $_GET['msgemail'];
$msg_date = $_GET['msgdate'];
$msg_subject = $_GET['msgsubj'];
$hostname = '{imap.gmail.com:993/ssl/novalidate-cert}[Gmail]/All Mail';
$username = 'your_email@gmail.com';
$password = 'your_gmail_password';
$stream = imap_open($hostname,$username,$password) or die('Cannot connect to mail server: ' . imap_last_error());
$isiemail = get_part($stream, $msg_number, &quot;TEXT/HTML&quot;);
echo &quot;&lt;h2&gt;$msg_subject&lt;/h2&gt;
	  From: $msg_from ($msg_email) &lt;br /&gt;
	  Date: $msg_date&lt;br/&gt;
	  &lt;hr /&gt;
	  $isiemail&quot;;
?&gt;

Selamat mencoba, semoga sukses.

Drop Down List Dinamis dengan JavaScript

Leave a reply

drop down list 1

drop down list 1

Drop Down List 2

Drop Down List 2

Yang dimaksud dengan “Drop Down List Dinamis” disini adalah ketika Anda memilih satu item dalam drop down list box maka drop down list box berikutnya akan berisi list item yang sesuai dengan pilihan Anda.

Drop down list bisa Anda buat dengan tag <select> <option> seperti coding dibawah ini.

&lt;body&gt;
&lt;h3&gt;Dynamic Drop Down List dengan JavaScript&lt;/h3&gt;
&lt;form name=&quot;form1&quot;&gt;	
	&lt;select  name=&quot;Category&quot; onChange=&quot;SelectCat2();&quot; &gt;
	&lt;option value=&quot;&quot;&gt;Pilih Jenis Produk&lt;/option&gt;
	&lt;option value=&quot;Desktop&quot;&gt;Desktop&lt;/option&gt;
	&lt;option value=&quot;Laptop&quot;&gt;Laptop&lt;/option&gt;
	&lt;option value=&quot;Smartphone&quot;&gt;Smartphone&lt;/option&gt;
	&lt;/select&gt;
	&lt;select id=&quot;SubCat&quot; name=&quot;SubCat&quot;&gt;
	&lt;option value=&quot;&quot;&gt;Pilih Merk&lt;/option&gt;
	&lt;/select&gt;
&lt;/form&gt;
&lt;/body&gt;

Pada contoh di atas kita buat 2 field drop down list, yakni: field “Category” dan field “SubCat”.
Pada field “Category” diberikan atribut onChange=”SelectCat2();” supaya ketika field itu berubah isinya maka akan menjalankan fungsi javascript “SelectCat2()”.

Berikut ini coding JavaScript selengkapnya.

function SelectCat2(){
	removeAllOptions(document.form1.SubCat);
	addOption(document.form1.SubCat, &quot;&quot;, &quot;Pilih Merk&quot;, &quot;&quot;);
	if(document.form1.Category.value == 'Desktop')
	{	addOption(document.form1.SubCat,&quot;Acer&quot;, &quot;Acer&quot;);
		addOption(document.form1.SubCat,&quot;Dell&quot;, &quot;Dell&quot;);
		addOption(document.form1.SubCat,&quot;Lenovo&quot;, &quot;Lenovo&quot;);
	}
	if(document.form1.Category.value == 'Laptop')
	{	addOption(document.form1.SubCat,&quot;Asus&quot;, &quot;Asus&quot;);
		addOption(document.form1.SubCat,&quot;Acer&quot;, &quot;Acer&quot;);
		addOption(document.form1.SubCat,&quot;Sony Vaio&quot;, &quot;Sony Vaio&quot;);
	}
	if(document.form1.Category.value == 'Smartphone')
	{	addOption(document.form1.SubCat,&quot;Samsung&quot;, &quot;Samsung&quot;);
		addOption(document.form1.SubCat,&quot;LG&quot;, &quot;LG&quot;);
		addOption(document.form1.SubCat,&quot;Sony Xperia&quot;, &quot;Sony Xperia&quot;);
	}
}
function removeAllOptions(selectbox)
{	var i;
	for(i=selectbox.options.length-1;i&gt;=0;i--)
	{	selectbox.remove(i); }
}
function addOption(selectbox, value, text )
{	var optn = document.createElement(&quot;OPTION&quot;);
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}

Anda bisa meletakan coding javascript ini di dalam tag head HTML.

Selamat mencoba, semoga bermanfaat.

 

 

Membuat Efek Fade-in/Fade-out dengan CSS3

Leave a reply

css3 transition

css3 transition

Hallo, ketemu lagi di coding website… Kali ini saya mencoba membuat efek fade-in dan fade-out elemen div dengan menggunakan fungsi transition yang ada di CSS3.

Coding ini biasa saya gunakan untuk menampilkan pesan error dalam box yang dapat hilang dalam beberapa detik (auto close box).

Baiklah, langsung saja saya berikan coding selengkapnya dibawah ini.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS3 Transition&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
#box
{   position:fixed;top:50%;left:50%;
    margin-top:-100px;margin-left:-200px;
    width:350px;height:80px;
    font-size:20px;color:#FFFFFF;
    padding:15px;text-align:center;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    background-color:#00b953;
    transition:opacity 1s ease-in-out;
    -webkit-transition:opacity 1s ease-in-out;
    -moz-transition:opacity 1s ease-in-out;
    -o-transition:opacity 1s ease-in-out;
}
#box.fade-out{opacity:0;transition-delay: 2s;}
#box.fade-in{opacity:1;transition-delay: 2s;}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function fade(btnElement)
{   if (btnElement.value === &quot;Fade Out&quot;) {
        document.getElementById(&quot;box&quot;).className = &quot;fade-out&quot;;
        btnElement.value = &quot;Fade In&quot;;
    }
    else {
        document.getElementById(&quot;box&quot;).className = &quot;fade-in&quot;;
        btnElement.value = &quot;Fade Out&quot;;
    }
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h3&gt;Membuat Efek Fade-in/Fade-out dengan CSS&lt;/h3&gt;
    &lt;input id=&quot;mybutton&quot; type=&quot;button&quot; value=&quot;Fade Out&quot; onclick=&quot;fade(this);&quot; /&gt;
    &lt;div id=&quot;box&quot; &gt;
        Perhatian&lt;hr&gt;
	Informasi ini akan hilang dalam 3 detik!
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba. semoga berhasil.

Mengambil Parameter URL dengan Javascript

Leave a reply

Form-HTML

Form-HTML

Metode pengiriman data lewat form HTML bisa dilakukan dengan 2 cara, yakni Method Get dan Method Post.

Perbedaannya adalah dengan method=post maka data dikirim tidak melalui URL, tapi melalui HTTP Request. Method=post memang lebih aman dan sangat direkomendasikan. Namun ada kalanya kita cukup memerlukan method=get untuk mengambil data yang dikirim lewat URL.

Sebagai contoh kita coba buat sebuah form dengan coding HTML sebagai berikut.

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Form Pendaftaran&lt;/title&gt;
&lt;style&gt;
fieldset{width:400px;border-color:#ff0000;border-style: solid;}
label,textarea{display:inline-block;vertical-align:middle;}
label {display:inline-block;width:100px;height:25px;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id=&quot;formTes&quot; name=&quot;formTes&quot; action=&quot;tesform.html&quot; method=&quot;get&quot;&gt;
&lt;fieldset&gt;&lt;legend&gt;Formulir Pendaftaran&lt;/legend&gt;
&lt;label&gt;Nama:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;nama&quot; maxlength=&quot;40&quot; size=&quot;40&quot; /&gt;&lt;br/&gt;
&lt;label&gt;Alamat:&lt;/label&gt;
&lt;textarea rows=&quot;3&quot; cols=&quot;30&quot; name=&quot;alamat&quot;/&gt;&lt;/textarea&gt;&lt;br/&gt;
&lt;label&gt;Kota:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;kota&quot; maxlength=&quot;20&quot; size=&quot;20&quot; /&gt;&lt;br/&gt;
&lt;label&gt;Kode Pos:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;kodepos&quot; maxlength=&quot;5&quot; size=&quot;6&quot; /&gt;&lt;br/&gt;
&lt;label&gt;e-mail:&lt;/label&gt;
&lt;input type=&quot;text&quot; name=&quot;email&quot; size=&quot;40&quot;/&gt;
&lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Kirim&quot; /&gt;&lt;/p&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Simpan coding itu dengan nama file form.html lalu buat file baru dengan nama tesform.html.

Copy paste coding berikut ini ke dalam file tesform.html.

&lt;html&gt;
&lt;body&gt;
&lt;h1&gt;
&lt;script type='text/JavaScript'&gt;
//ambil URL
var url = window.location.toString();
//ambil bagian parameternya
url.match(/\?(.+)$/);
var params = RegExp.$1;
// pisahkan parameter URL ke associative array
var params = params.split(&quot;&amp;&quot;);
var queryStringList = {};
for(var i=0;i&lt;params.length;i++)
{	var tmp = params[i].split(&quot;=&quot;);
	queryStringList[tmp[0]] = unescape(tmp[1]);
}
// tampilkan isi associative array
for(var i in queryStringList)
{	var res = queryStringList[i].replace(/[+]/g, &quot; &quot;);
	document.write(i+&quot; = &quot;+res+&quot;&lt;br/&gt;&quot;);
}
&lt;/script&gt;
&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;

Coba jalankan file form.html dam isilah form HTML tersebut lalu submit. Maka akan tampil hasil isian form tersebut.

Hasil Submit Form

Hasil Submit Form

Selamat mencoba. semoga berhasil.

Membuat Captcha dengan JavaScript

Leave a reply

Captcha

Captcha

reCaptcha merupakan satu cara untuk melindungi website dari ancaman spam. Misalkan kita memiliki website dimana terdapat form yang dapat diisi dan disubmit oleh user. Nah, Spam dapat men-submit form tersebut berkali-kali.

Untuk mencegah ancaman spam, biasanya ditambahkan reCaptcha pada form website.

Kita dapat membuat captcha dengan menggunakan JavaScript dibawah ini:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Captcha dengan Javascript&lt;/title&gt;
&lt;style&gt;
.captcha
{ font: italic bold 16px &quot;Comic Sans MS&quot;, cursive, sans-serif; 
color:#a0a0a0;background-color:#c0c0c0;
width:100px;border-radius: 5px;
text-align:center;
text-decoration:line-through;
}
.errmsg
{color:#ff0000;}
&lt;/style&gt;
&lt;script&gt;
var captcha= new Array ();
function validateRecaptcha(){
	var recaptcha= document.getElementById(&quot;recaptcha&quot;).value;;
	var validRecaptcha=0;
	for(var z=0; z&lt;6; z++){
		if(recaptcha.charAt(z)!= captcha[z]){
			validRecaptcha++;
		}
	}
	if (recaptcha == &quot;&quot;){
		document.getElementById('errCaptcha').innerHTML = 'Re-Captcha must be filled';
	} else if (validRecaptcha&gt;0 || recaptcha.length&gt;6){
		document.getElementById('errCaptcha').innerHTML = 'Sorry, Wrong Re-Captcha';
	} else{
		document.getElementById('errCaptcha').innerHTML = 'OK';
	}
}
function createCaptcha(){
	for(q=0; q&lt;6 ; q++){
		if(q %2 ==0){
			captcha[q] = String.fromCharCode(Math.floor((Math.random()*26)+65));
		}else{		
			captcha[q] = Math.floor((Math.random()*10)+0);
		}
	}
	thecaptcha=captcha.join(&quot;&quot;);
	document.getElementById('captcha').innerHTML=
	 &quot;&lt;span class='captcha'&gt; &quot; + thecaptcha+ &quot; &lt;/span&gt;&quot; + &quot;&amp;nbsp; &lt;a onclick='createCaptcha()' href='#'&gt;recaptcha&lt;/a&gt;&quot;;	
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table&gt;
&lt;tr&gt;&lt;td&gt;Captcha : &lt;/td&gt;
	&lt;td id=&quot;captcha&quot;&gt;
	&lt;script&gt; createCaptcha(); &lt;/script&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
	&lt;td&gt;Type Captcha : &lt;/td&gt;
	&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;recaptcha&quot; id=&quot;recaptcha&quot; placeholder=&quot;Type the captcha&quot;/&gt;&lt;/td&gt;
    &lt;td id=&quot;errCaptcha&quot; class=&quot;errmsg&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
	&lt;td colspan=&quot;2&quot; style=&quot;text-align:right;&quot;&gt;
		&lt;input type=&quot;button&quot; value=&quot;Submit&quot; onClick=&quot;validateRecaptcha()&quot;/&gt;
	&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

Anda dapat mengembangkan coding tersebut sesuai kebutuhan. Selamat mencoba, semoga sukses.

Membuat Efek Text Berkedip dengan CSS3

Leave a reply

Blinking Background dan Text

Blinking Background dan Text

Pada artikel sebelumnya saya pernah memberikan cara membuat blinking text dengan javascript. Kali ini saya memberikan cara lain dengan menggunakan kemampuan animasi pada CSS3.

Ada 2 efek berkedip yang akan dibuat disini, yang pertama adalah warna background merah yang berkedip dan yang kedua adalah text putih yang berkedip.

Untuk itu coding HTML dan CSS-nya adalah sebagai berikut.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style&gt;
@keyframes bg-blink {  
    0% { background-color:#ff0000; }
    100% { background-color:#ffffff; }
}
@-webkit-keyframes bg-blink {
    0% { background-color:#ff0000; }
    100% { background-color:#ffffff; }
}
.bg-blink {
    -webkit-animation: bg-blink 1s linear infinite;
    -moz-animation: bg-blink 1s linear infinite;
    animation: bg-blink 1s linear infinite;
} 
.blink {
  animation: blink 1s steps(5, start) infinite;
  -webkit-animation: blink 1s steps(5, start) infinite;
  color:#ffffff;
}
@keyframes blink {
  to { visibility: hidden; }
}
@-webkit-keyframes blink {
  to { visibility: hidden; }
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div class=&quot;bg-blink&quot;&gt; Blinking Background &lt;/div&gt;
 &lt;br/&gt;
 &lt;div style=&quot;background-color:#ff0000;&quot;&gt;
 &lt;span class=&quot;blink&quot;&gt; Blinking Text &lt;/span&gt; 
 &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba. Semoga sukses.

Bar Chart dengan CSS3

Leave a reply

CSS3 Chart dengan Animasi

CSS3 Chart dengan Animasi

CSS3 memungkinkan kita membuat chart dengan animasi di mana bar chart tersebut dapat bergerak dari 0% sampai panjang nilai barnya, misalnya 58%.

CSS3 juga memungkinkan kita memberikan warna gradasi tanpa menggunakan file gambar, sehingga lebih efektif dan efisien.

Begitu juga properti border-radius yang membuat tiap sudut kanan dari bar tersebut dapat melengkung (rounded corder).

Untuk membuat chat tersebut, pertama Anda buat coding HTML sebagai berikut.

&lt;body&gt;
&lt;h2&gt;Web Browser Statistic Jan 2014&lt;/h2&gt;
&lt;div class=&quot;record&quot;&gt;
	&lt;span class=&quot;bar_value&quot;&gt;58%&lt;/span&gt;
	&lt;div style=&quot;width:58%&quot;&gt;
		&lt;div class=&quot;anim&quot;&gt;
			&lt;span class=&quot;bar_name&quot;&gt;Chrome&lt;/span&gt;		
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;record&quot;&gt;
	&lt;span class=&quot;bar_value&quot;&gt;27%&lt;/span&gt;
	&lt;div style=&quot;width:27%&quot;&gt;
		&lt;div class=&quot;anim&quot;&gt;
			&lt;span class=&quot;bar_name&quot;&gt;Firefox&lt;/span&gt;		
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;record&quot;&gt;
	&lt;span class=&quot;bar_value&quot;&gt;9%&lt;/span&gt;
	&lt;div style=&quot;width:9%&quot;&gt;
		&lt;div class=&quot;anim&quot;&gt;
			&lt;span class=&quot;bar_name&quot;&gt;IE&lt;/span&gt;		
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;record&quot;&gt;
	&lt;span class=&quot;bar_value&quot;&gt;4%&lt;/span&gt;
	&lt;div style=&quot;width:4%&quot;&gt;
		&lt;div class=&quot;anim&quot;&gt;
			&lt;span class=&quot;bar_name&quot;&gt;Safari&lt;/span&gt;		
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;record&quot;&gt;
	&lt;span class=&quot;bar_value&quot;&gt;2%&lt;/span&gt;
	&lt;div style=&quot;width:2%&quot;&gt;
		&lt;div class=&quot;anim&quot;&gt;
			&lt;span class=&quot;bar_name&quot;&gt;Opera&lt;/span&gt;		
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

Kemudian Anda tambahkan coding CSS sebagai berikut.

div.record{font: bold 12px Arial;
 float: left; width: 100%;
 border: 1px solid #ccc;
 background-color: #e0e0e0;
 margin-bottom: 2px;
 }
div.anim { width:100%; height:30px;
border-radius: 0px 5px 5px 0px;
position:relative;
background: linear-gradient(to top, #ff9999 0%,#E03D3D 24%,#ff0000 50%,#E03D3D 79%,#ff9999 100%);
animation:myfirst 1s linear 0.1s ;
}
@keyframes myfirst
{from {width:0px;} to {width:100%;}}
span.bar_name
{ color: #ffffff; float: left;
 margin: 7px 0 0 5px;
}
span.bar_value
{ color: #6D8591; float: right;
margin: 7px 0 0 5px;
}

Selamat mencoba. Semoga sukses.

Membuat Tabel Body Scroll dengan CSS

Leave a reply

Table Body Scroll

Table Body Scroll

Membuat Table dengan HTML itu sangat mudah. Anda dapat membuatnya dengan tag <table>, <thead>, <tbody>, <tr>, <th> dan <td> seperti pada coding HTML dibawah ini.

&lt;html&gt;
&lt;body&gt;
&lt;table class=&quot;scroll&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;&lt;th&gt;Header 1&lt;/th&gt;&lt;th&gt;Header 2&lt;/th&gt;&lt;th&gt;Header 3&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2 Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2 Content 2 Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2 Content 2 Content 2 Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2 Content 2 Content 2 Content 2 Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Content 1&lt;/td&gt;&lt;td&gt;Content 2&lt;/td&gt;&lt;td&gt;Content 3&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

Untuk membuat tampilan table tersebut lebih menarik, kita gunakan CSS.
Dengan CSS kita juga bisa membuat body table tersebut memiliki vertical scroll bar seperti pada gambar diatas.

Body table dapat kita scroll dengan setting CSS property height dan property display:block.

Berikut ini coding CSS selengkapnya.

&lt;style type=&quot;text/css&quot;&gt;
table.scroll {width:700px;border:1px #a9c6c9 solid;font:12px verdana,arial,sans-serif;color:#333333;}
table.scroll thead {display:table;width:100%;}
table.scroll tbody {display:block;height:300px;overflow:auto;float:left;width:100%;}
table.scroll tbody tr {display:table;width:100%;}
table.scroll th, td {width:33%;padding:8px;}
table.scroll th {background-color:#000099;color:#ffffff;}
table.scroll tr:hover td {background:#a0a0a0;color:#ffffff;}
table.scroll tr:nth-child(odd) {background-color:#c0c0c0;}
table.scroll tr:nth-child(even) {background-color:#f0f0f0;}
&lt;/style&gt;

Pada coding CSS tersebut juga disertakan table hover dan table strip (zebra color).

Selamat mencoba. semoga berhasil.

Menu Tabs Dengan CSS

Leave a reply

CSS Tabs Menu

CSS Tabs Menu

Banyak cara untuk membuat menu Tabs seperti gambar di atas baik dengan JavaScript / JQuery maupun CSS.
Di sini saya akan berikan cara membuat Tabs Menu hanya dengan CSS. Menu Tabs ini berjalan di semua browser termasuk MS-IE.

Pada coding CSS terdapat operator > (child combinatory Selector) yang digunakan untuk memilih hanya direct childrennya.
Misal:
.tabs > div {display:inline;}
berarti selector div yang berada langsung di bawah elemen dengan class tabs akan ditampilkan secara inline (seperti tag <span>).
Berikut ini coding selengkapnya.



Menu Tabs Dengan CSS&lt;/pre&gt;
&lt;style&gt;&lt;!--
.tabs {min-height:300px;position:relative;width:100%;}
.tabs &gt; div {display:inline;}
.tabs &gt; div &gt; a {margin-left:-1px;position:relative;left:1px;text-decoration:none;color:#000000;background:#c0c0c0;display:block;float:left;padding:10px 10px;border:1px solid #ccc;border-bottom: 1px solid #ffffff; }
.tabs &gt; div:not(:target) &gt; a { border-bottom: 0; background: linear-gradient(#ffffff, #c0c0c0); }
.tabs &gt; div:target &gt; a { background:#ffffff; }
.tabs &gt; div &gt; div { background:#ffffff; z-index:-2; left: 0; top:39px; bottom:0; right:0; padding:20px; border:1px solid #ccc; }
.tabs &gt; div:not(:target) &gt; div { position: absolute }
.tabs &gt; div:target &gt; div { position: absolute; z-index: -1; }
--&gt;&lt;/style&gt;
&lt;pre&gt;

&lt;/pre&gt;
&lt;h1&gt;Membuat Menu Tabs dengan CSS&lt;/h1&gt;
&lt;div class=&quot;tabs&quot;&gt;
&lt;div id=&quot;tab1&quot;&gt;&lt;a href=&quot;#tab1&quot;&gt;Tab Pertama&lt;/a&gt;
&lt;div&gt;... Di Sini Konten Dari Tab Pertama ...&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;tab2&quot;&gt;&lt;a href=&quot;#tab2&quot;&gt;Tab Ke-Dua&lt;/a&gt;
&lt;div&gt;... Di Sini Konten Dari Tab Ke-Dua ...&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;tab3&quot;&gt;&lt;a href=&quot;#tab3&quot;&gt;Tab Ke-Tiga&lt;/a&gt;
&lt;div&gt;... Di Sini Konten Dari Tab Ke-Tiga ...&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;pre&gt;

Anda dapat mengembangkan coding ini sesuai kebutuhan Anda.
Selamat mencoba. semoga berhasil.

Membuat Footer Tetap di Bawah

Leave a reply

Footer tetap di bawah

Footer tetap di bawah

Kadang kala kita ingin membuat halaman web dimana footer selalu tampil di paling bawah walaupun isi halaman web kurang dari 1 halaman atau juga isinya lebih dari 1 halaman sehingga muncul scrollbar.

Untuk membuat footer tetap berada di bawah, kita bisa buat dengan coding HTML dan CSS sebagai berikut:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Membuat footer tetap di bawah&lt;/title&gt;
&lt;style&gt;
html,body{margin:0;padding:0;height:100%;font:13px Arial;}
#wrapper{min-height:100%;position:relative;}
#header{background:#f0f0f0;padding:5px;height:50px;color:#0000ff;}
#body{padding-bottom:40px;padding-left:10px;}
#footer{background:#f0f0f0;position:absolute;bottom:0;width:100%;
   text-align:center;color:#808080;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;wrapper&quot;&gt;
   &lt;div id=&quot;header&quot;&gt;&lt;h1&gt;Membuat footer tetap di bawah&lt;/h1&gt;&lt;/div&gt;
   &lt;div id=&quot;body&quot;&gt;
	&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Content&lt;/p&gt;
   &lt;/div&gt;
   &lt;div id=&quot;footer&quot;&gt;&lt;p&gt;Copyright &amp;copy; 2014 - All Rights Reserved&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Anda bisa kembangkan coding tersebut untuk membuat layout web 2 kolom dan seterusnya.
Selamat mencoba, semoga berhasil.

Validasi Form dengan JQuery

Leave a reply

Validasi Form dengan JQuery

Validasi Form dengan JQuery

Pada posting sebelumnya saya telah memberikan cara melakukan validasi form dengan javascript. Kali ini saya akan memberikan cara validasi form dengan JQuery seperti pada tampilan di atas.

Pertama download file script JQuery di di website JQuery: http://jquery.com/download/. Dan file plugin JQuery Validation di http://jqueryvalidation.org/

Kemudian copy HTML coding berikut ini dalam file validasi.html.

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;JQuery Form Validation&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;val.css&quot; type=&quot;text/css&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.validate.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&quot;#form1&quot;).validate({
	rules:{	nama:&quot;required&quot;,
			umur:{required:true,number: true},		
			username:&quot;required&quot;,
			password:{required: true,minlength:5},		
		    cpassword:{required: true,equalTo: &quot;#password&quot;},
			email:{required:true,email:true},
			website:{required:true,url:true}
		  },
	messages:{ 
		    nama:{required:'Nama harus di isi'},
			umur:{
			    required:'Umur harus di isi',
			    number  :'Hanya boleh di isi Angka'},
			username: {
			    required:'Username harus di isi'},
		    password: {
			    required :'Password harus di isi',
			    minlength:'Password minimal 5 karakter'},
		    cpassword: {
			    required:'Ulangi Password harus di isi',
			    equalTo :'Isinya harus sama dengan Password'},
		    email: {
			    required:'Email harus di isi',
			    email   :'Email harus valid'},
		    website: {
			    required:'Website harus di isi',
			    url     :'Alamat website harus valid'}
			},
     success: function(label) {
        label.text('OK!').addClass('valid');}
	});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;form-div&quot;&gt;
&lt;form id=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
	&lt;div class=&quot;form-row&quot;&gt;
    &lt;span class=&quot;label&quot;&gt;Nama *&lt;/span&gt;
    &lt;input name=&quot;nama&quot; type=&quot;text&quot;&gt;
  	&lt;/div&gt;
	&lt;div class=&quot;form-row&quot;&gt;
	&lt;span class=&quot;label&quot;&gt;Umur *&lt;/span&gt;
	&lt;input name=&quot;umur&quot; id=&quot;umur&quot; type=&quot;text&quot;&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-row&quot;&gt;
	&lt;span class=&quot;label&quot;&gt;Username *&lt;/span&gt;
	&lt;input name=&quot;username&quot; id=&quot;username&quot; type=&quot;text&quot;&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-row&quot;&gt;
	&lt;span class=&quot;label&quot;&gt;Password *&lt;/span&gt;
	&lt;input name=&quot;password&quot; id=&quot;password&quot; type=&quot;password&quot;&gt;
	&lt;/div&gt; 		
	&lt;div class=&quot;form-row&quot;&gt;
	&lt;span class=&quot;label&quot;&gt;Ulangi Password *&lt;/span&gt;
	&lt;input name=&quot;cpassword&quot; id=&quot;cpassword&quot; type=&quot;password&quot;&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-row&quot;&gt;
	&lt;span class=&quot;label&quot;&gt;E-Mail *&lt;/span&gt;
	&lt;input name=&quot;email&quot; id=&quot;email&quot; type=&quot;text&quot;&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-row&quot;&gt;
	&lt;span class=&quot;label&quot;&gt;Website *&lt;/span&gt;
	&lt;input name=&quot;website&quot; id=&quot;website&quot; type=&quot;text&quot;&gt;
	&lt;/div&gt;
	&lt;div class=&quot;form-row&quot;&gt;
	&lt;input class=&quot;submit&quot; value=&quot;Proses&quot; type=&quot;submit&quot;&gt;
	&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Berikut Coding CSS-nya (val.css)

.form-div {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
border:1px #ccc solid;
padding:10px;
width:500px;
height:220px;
background-color:#def;
}
.form-div .submit {
margin-left:105px;
margin-top:10px;
}
.form-div .label {
display:block;
float:left;
width:100px;
text-align:right;
margin-right:5px;
}
.form-div input {
width: 180px;
float: left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.form-div .form-row {
padding:5px 0;
clear:both;
width:700px;
}
.form-div label.error {
margin-left:10px;
width:250px;
display:block;
float:left;
color:red;
padding-left:20px;
background: url(unvalid.gif) no-repeat;
}
.form-div label.valid {
width:0px;
display: inline-block;
text-indent:0px;
color:#0000ff;
background: url(valid.gif) center no-repeat;
}

Untuk file icon valid.gif dan unvalid.gif bisa anda cari di google… 🙂
Selamat mencoba.

Alert Box Auto Close

Leave a reply

Alert Box Auto Closed

Alert Box Auto Closed

Umumnya kita membuat alert box dengan menggunakan fungsi javascript alert(). Fungsi alert() ini akan menampilkan dialog box dari browser.

Nah, disini saya akan berikan coding untuk membuat dialog box dengan JavaScript dan CSS tapi tanpa fungsi alert().
Alert Dialog Box akan auto close dalam waktu 3 detik. Disini juga terdapat fungsi countdown() untuk menampilkan hitungan mundur 3 sampai 0.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Alert Box&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
body {height:100%;margin:0;padding:0;}
#overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 10;
    background-color:rgba(0,0,0,0.5);
}
#overlay div {
    width:300px;
    margin: 100px auto;
    background-color: yellow;
    border:3px solid #a0a0a0;
    border-radius:10px;
    box-shadow:3px 3px 5px 6px #606060;
    padding:15px;
    text-align:left;
}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function overlay() {
el = document.getElementById(&quot;overlay&quot;);
el.style.visibility = &quot;visible&quot;
myVar=setInterval(function(){el.style.visibility = &quot;hidden&quot;; clearTimeout(myVar);},3000);
countdown();
}
function countdown()
{ var i=&quot;2&quot;; 	
  myVar1=setInterval(
  function()
  {  document.getElementById(&quot;counter&quot;).innerHTML=i; 
     if (i==0) {	clearTimeout(myVar1);}
     i--;
  },1000);
}
	
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Alert Box Auto Close dengan CSS &amp; Javascript&lt;/h1&gt;
&lt;h2&gt;The alert box will be closed in &lt;span id=&quot;counter&quot;&gt;3&lt;/span&gt; second.&lt;/h2&gt;
&lt;div id=&quot;overlay&quot;&gt;
    &lt;div&gt;
        &lt;img src=&quot;alert_icon.png&quot; style=&quot;width:30px;height:30px;vertical-align:middle&quot;&gt; 
	&lt;b&gt;Alert!&lt;/b&gt;
	&lt;hr/&gt;
	&lt;p&gt;This message will hide in 3 second.&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;
&lt;input type=&quot;button&quot; onclick=&quot;overlay()&quot; value=&quot;Click here to open dialog box&quot; /&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba, semoga berhasil.

Validasi Radio Button dan Checkbox dengan Javascript

Leave a reply

Validasi Radio Button dan Checkbox

Validasi Radio Button dan Checkbox

Pada artikel sebelumnya saya telah berikan cara validasi textbox dan tanggal. Kali ini saya akan berikan contoh cara validasi data pada radio button dan checkbox.

Seperti kita tahu bahwa radio botton adalah field yang di-input oleh user dengan cara memilih satu dari beberapa pilihan, misalnya data gender pilihannya laki-laki atau perempuan.
Sedangkan checkbox mirip dengan radio button tapi user bias memilih lebih dari satu pilihan.

Bagaimana cara mengambil data dari field radio button dan checkbox dan bagaimana pula cara validasi supaya field itu harus diisi oleh user? Berikut coding HTML dan Javascriptnya.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Javascript - Mengambil nilai dari Checkbox dan Radio Button&lt;/title&gt;
&lt;script&gt;
function displayResult(browser)
{ document.getElementById(&quot;result&quot;).value=browser; }
function displayAlert()
{	var x=document.getElementById(&quot;result&quot;).value;
	if (x==&quot;&quot;)
	{	alert(&quot;Please select your favorite browser!&quot;);
		form.browser[0].focus();
		return false;
	}
	else
		alert(x + &quot; is your favorite browser&quot;);
}
function displayResult2(frm)
{	var selectedbrowser=&quot;&quot;;
	for (i = 0; i &lt; frm.browser2.length; i++)
    {  	if (frm.browser2[i].checked)
		{	selectedbrowser += frm.browser2[i].value +&quot;, &quot;;}
	}
	document.getElementById(&quot;result2&quot;).value=selectedbrowser;
}
function displayAlert2(frm)
{	var selectedbrowser=&quot;&quot;;
	for (i = 0; i &lt; frm.browser2.length; i++)
    {  	if (frm.browser2[i].checked)
		{	selectedbrowser += frm.browser2[i].value +&quot;, &quot;;}
	}
	if (selectedbrowser==&quot;&quot;)
	{	alert(&quot;Please select your favorite browser!&quot;);
		form.browser2[0].focus();
		return false;
	}
	else
	alert(&quot;Your favorite browser : &quot; + selectedbrowser);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Select your favorite browser:&lt;/p&gt;
&lt;form&gt;
&lt;input type=&quot;radio&quot; name=&quot;browser&quot; onclick=&quot;displayResult(this.value)&quot; value=&quot;Internet Explorer&quot;&gt;Internet Explorer&lt;br&gt;
&lt;input type=&quot;radio&quot; name=&quot;browser&quot; onclick=&quot;displayResult(this.value)&quot; value=&quot;Firefox&quot;&gt;Firefox&lt;br&gt;
&lt;input type=&quot;radio&quot; name=&quot;browser&quot; onclick=&quot;displayResult(this.value)&quot; value=&quot;Opera&quot;&gt;Opera&lt;br&gt;
&lt;input type=&quot;radio&quot; name=&quot;browser&quot; onclick=&quot;displayResult(this.value)&quot; value=&quot;Google Chrome&quot;&gt;Google Chrome&lt;br&gt;
&lt;input type=&quot;radio&quot; name=&quot;browser&quot; onclick=&quot;displayResult(this.value)&quot; value=&quot;Safari&quot;&gt;Safari&lt;br&gt;&lt;br&gt;
Your favorite browser is: &lt;input type=&quot;text&quot; id=&quot;result&quot;&gt;&lt;br&gt;
&lt;button type=&quot;button&quot; onclick=&quot;displayAlert()&quot;&gt;Display value of radio button in alert&lt;/button&gt;
&lt;br&gt;&lt;hr&gt;
&lt;p&gt;Select your favorite browser:&lt;/p&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;browser2&quot; onclick=&quot;displayResult2(this.form)&quot; value=&quot;Internet Explorer&quot;&gt;Internet Explorer&lt;br&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;browser2&quot; onclick=&quot;displayResult2(this.form)&quot; value=&quot;Firefox&quot;&gt;Firefox&lt;br&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;browser2&quot; onclick=&quot;displayResult2(this.form)&quot; value=&quot;Opera&quot;&gt;Opera&lt;br&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;browser2&quot; onclick=&quot;displayResult2(this.form)&quot; value=&quot;Google Chrome&quot;&gt;Google Chrome&lt;br&gt;
&lt;input type=&quot;checkbox&quot; name=&quot;browser2&quot; onclick=&quot;displayResult2(this.form)&quot; value=&quot;Safari&quot;&gt;Safari&lt;br&gt;&lt;br&gt;
Your favorite browser: &lt;input type=&quot;text&quot; id=&quot;result2&quot; size=&quot;60&quot;&gt;&lt;br&gt;
&lt;button type=&quot;button&quot; onclick=&quot;displayAlert2(this.form)&quot;&gt;Display value of radio button in alert&lt;/button&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba.

Fungsi Javascript untuk membuat huruf besar tiap kata

Leave a reply

Ada kalanya kita membutuhkan fungsi dalam javascript untuk menampilkan huruf besar di setiap kata. Berikut ini fungsi javascript dan cara pemakaiannya:

&lt;script type=&quot;text/javascript&quot;&gt;

var matakuliah=&quot;Web based ProGramming&quot;;
document.write(Capitalize(matakuliah));

function Capitalize(str)
{  return str.replace (/\w\S*/g, 
      function(txt)
      {  return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); } );
}
&lt;/script&gt;

String yang ingin di ubah menjadi huruf besar di setiap katanya adalah:
“Web based ProGramming”
Dengan fungsi Capitalize tersebut maka string menjadi:
“Web Based Programming”

Hal ini dapat terjadi karena penggunaan fungsi string replace.
Parameter /\w\S*/g adalah regular expression (diawali dengan garis miring /).
Regular expression \w berarti semua alphanumeric.
Regular expression \S berarti ambil 1 kata (1 string)
dan karakter g berarti global (semua string)
Jadi parameter /\w\S*/g mengandung arti semua kata dalam string dimana untuk setiap katanya diganti (replace) dengan huruf pertama adalah huruf besar dan sisanya huruf kecil.

Silakan mencoba.

Membuat Menu Vertikal Dengan CSS

Leave a reply

Vertical-Menu

Vertical-Menu

Pada posting saya sebelumnya telah di berikan contoh cara membuat menu horizontal dengan CSS. Di sini akan saya berikan cara membuat menu vertical dengan CSS yang cukup mudah dan singkat.

Pertama siapkan strutur menu HTML-nya dengan tag list (ul dan li). Menu bisa hover untuk menampilkan submenu seperti pada gambar di atas.
Berikut ini contoh coding HTML-nya:

&lt;body&gt;
&lt;div id=&quot;leftmenu&quot;&gt;
	&lt;p&gt;Menu Navigator&lt;/p&gt;
	&lt;ul&gt;
	  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Category&lt;/a&gt;
		&lt;ul&gt;
		  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;HTML&lt;/a&gt;&lt;/li&gt;
		  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;CSS&lt;/a&gt;&lt;/li&gt;
		  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
		  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;PHP&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
	  &lt;/li&gt;
	  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Forum Discussion&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
	  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
&lt;/body&gt;

Kemudian untuk presentasinya kita buat CSS dengan coding sebagai berikut:

&lt;style&gt;
#leftmenu {width:130px;font:bold 12px arial,verdana,sans-serif;}
#leftmenu li a {text-decoration:none;border-top:1px solid #ffffff;
color:#000000;display:block;background-color:#e0e0e0;padding:10px;}
#leftmenu li a:hover {background-color:#f0f0f0;}
#leftmenu ul {list-style:none;padding:0px;}
#leftmenu ul ul{position:absolute;top:75px;left:135px;visibility:hidden;} 
#leftmenu ul li:hover ul{visibility:visible;}
&lt;/style&gt;

Silahkan di modifikasi sesuai selera Anda. Selamat mencoba.

Watermark Login Page Dengan JQuery

Leave a reply

Watermark Login Page

Watermark Login Page

Pernah login di windows 7? Pada field passwordnya terdapat tulisan watermark “Password” yang jika kita ketik pada field tersebut maka tulisan watermark “Password” akan hilang (hide) lalu jika kita hapus ketikan kita maka tulisan watermark “Password” akan muncul lagi (show).

Untuk membuat login page seperti itu kita bisa lakukan dengan method hide/show di JQuery. Sebenarnya di HTML 5 fitur watermark bisa dilakukan dengan attribute “placeholder” pada input tag, tapi itu hanya bekerja dengan baik di IE 10+ saja. Dengan JQuery maka operasi watermark login seperti windows 7 bisa bekerja di semua web browser populer (IE, Firefox, Chrome, Safari, Opera).

Berikut ini coding HTML-nya.

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;Log In&lt;/title&gt;
&lt;link href=&quot;login-style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
	$('#password1').show();
	$('#password2').hide();
	$('#password1').focus(function() {
		$('#password1').hide();
		$('#password2').show();
		$('#password2').focus();
	});
	$('#password2').blur(function() {
		if($('#password2').val() == '') {
			$('#password1').show();
			$('#password2').hide();
		}
	});
	$('.username').each(function() {
		var default_value = this.value;
		$(this).css('color', '#a0a0a0');
		$(this).focus(function() {
			if(this.value == default_value) {
				this.value = '';
				$(this).css('color', '#000000');
			}
		});
		$(this).blur(function() {
			if(this.value == '') {
				$(this).css('color', '#a0a0a0');
				this.value = default_value;
			}
		});
	});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;container&quot;&gt;
    &lt;div id=&quot;top&quot;&gt;
    &lt;h1&gt;Login to Application System&lt;/h1&gt;
    &lt;/div&gt; 
    &lt;div id=&quot;loginbox&quot;&gt;
	&lt;fieldset&gt;
		&lt;legend&gt;Please Log In&lt;/legend&gt;
		&lt;form name=&quot;login_form&quot; class=&quot;form&quot;&gt;
		&lt;label for=&quot;username&quot;&gt;User Name&lt;/label&gt;
		&lt;div class=&quot;div_texbox&quot;&gt;
		&lt;input name=&quot;username&quot; type=&quot;text&quot; class=&quot;username&quot; id=&quot;username&quot; value=&quot;Username&quot; /&gt;
		&lt;/div&gt;
		&lt;label for=&quot;password&quot;&gt;Password&lt;/label&gt;
		&lt;div class=&quot;div_texbox&quot;&gt;
		&lt;input class=&quot;password&quot; id=&quot;password1&quot; type=&quot;text&quot; value=&quot;Password&quot; autocomplete=&quot;off&quot;/&gt;
		&lt;input class=&quot;password&quot; id=&quot;password2&quot; type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot; autocomplete=&quot;off&quot; /&gt;
		&lt;/div&gt;
		&lt;div class=&quot;button_div&quot;&gt;
		&lt;input name=&quot;Submit&quot; type=&quot;button&quot; value=&quot;Submit&quot; class=&quot;buttons&quot; /&gt;
		&lt;/div&gt;
		&lt;/form&gt;
		&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;
	&lt;/fieldset&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Berikut coding / script CSS untuk login page tersebut.

/* login-style.css */
@charset &quot;utf-8&quot;;
body {
	margin:0;padding:0;
	background-color:#ffffff;
	font-family:Arial, Helvetica, sans-serif;
}
fieldset {
	width:460px;
	border:2px dashed #CCC;
	padding:10px;
	margin-top:20px;
	margin-bottom:20px;
}
legend {
	font-size:90%;
	font-weight:normal;
	line-height:1.1;
	color:#fff;
	background: #666;
	border: 1px solid #333;
	padding: 2px 6px;
}
h1 {
	font-size: 175%;
	letter-spacing: -1px;
	font-weight: normal;
	line-height: 1.1;
	color:#808080;
}
label {
	width:140px;
	height:32px;
	margin-top:3px;
	margin-right:2px;
	padding-top:11px;
	padding-left:6px;
	background-color:#CCCCCC;
	float:left;
	display: block;
	font-size: 115%;
	letter-spacing: -1px;
	font-weight: normal;
	line-height: 1.1;
	color:#666;
}
#container {
	width:550px;
	margin:auto;
	padding:10px;
}
#top {
	height:50px;
}
#loginbox {
	width:530px;
	padding-top:30px;
	float:left;
}
.clear {	clear:both;}
.div_texbox {
	width:300px;
	float:left;
	background-color:#E6E6E6;
	height:35px;
	margin-top:3px;
	padding-top:5px;
	padding-bottom:3px;
	padding-left:5px;
}
.textbox {
	background-image: url(images/user.png);
	background-color:#FFFFFF;
	background-repeat: no-repeat;
	background-position:left;
	width:250px;
	font:normal 18px Arial;
	color: #999999;
	padding:3px 5px 3px 19px;
}
.textbox:focus, .textbox:hover {	background-color:#F0FFE6;}
.username {
    	background-image: url(images/user.png);
    	background-repeat: no-repeat;
    	background-position:left;
    	background-color:#FFFFFF;
		width:265px;
    	font:normal 18px Arial;
    	color: #999999;
    	padding:3px 5px 3px 19px;
}
.username:focus, .username:hover {background-color:#F0FFE6;}
.password {
    	background-image: url(images/pass.png);
    	background-repeat: no-repeat;
   		background-position:left;
   		background-color:#FFFFFF;
		width:265px;
    	font:normal 18px Arial;
    	color: #999999;
    	padding:3px 5px 3px 19px;
}
.password:focus, .password:hover{background-color:#F0FFE6;}
#password-clear{display:none;color:#a0a0a0;}
.button_div {
	width:388px;
	float:left;
	background-color:#fff;
	border:1px solid #ccc;
	text-align:center;
	height:35px;
	margin-top:3px;
	padding:5px 32px 3px;
}
.buttons {
	background: #e3e3db;
	font-size:12px; 
	color: #989070; 
	padding: 6px 14px;
	border-width: 2px;
	border-style: solid;
	border-color: #fff #d8d8d0 #d8d8d0 #fff;
	text-decoration: none;
	text-transform:uppercase;
	font-weight:bold;
}

Untuk script JQuery bisa download di website JQuery: http://jquery.com/download/

Disana ada 2 gambar icon yakni, user.png dan pass.png, masing masing bisa anda buat dengan screen capture gambar di atas.

Selamat mencoba.

Membuat ToolTips Dengan CSS

Leave a reply

CSS ToolTips

CSS ToolTips

ToolTip adalah informasi yang tampil ketika Anda berada di atas (hover) sebuah text atau gambar di halaman web.
Misalnya ketika mouse Anda arahkan pada text “Information” pada gambar di atas maka akan muncul kotak informasi yang isinya bisa Anda tentukan sendiri.

Pada HTML Anda dapat membuat ToolTip dengan menggunakan atribut “title”, seperti:

&lt;p&gt;&lt;abbr title=&quot;Cascading Style Sheet&quot;&gt;CSS&lt;/abbr&gt; mengendalikan tampilan halaman web.&lt;/p&gt;

Untuk membuat tooltip terlihat lebih menarik, Anda bisa menggunakan CSS pada elemen div HTML.

Berikut ini coding HTML dan CSSnya:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en&quot;&gt;
	&lt;head&gt;
		&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
		&lt;title&gt;ToolTips Example&lt;/title&gt;
		&lt;style type=&quot;text/css&quot;&gt;
		.tooltip {
			border-bottom: 1px dotted #000000; color: #000000; outline: none;
			cursor: help; text-decoration: none;
			position: relative;
		}
		.tooltip span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
			font-family: Calibri, Tahoma, Geneva, sans-serif;
			position: absolute; left: 1em; top: 2em; z-index: 99;
			margin-left: 0; width: 250px;
		}
		.tooltip:hover img {
			border: 0; margin: -10px 0 0 -55px;
			float: left; position: absolute;
		}
		.tooltip:hover em {
			font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
			display: block; padding: 0.2em 0 0.6em 0;
		}
		.classic { padding: 0.8em 1em; }
		.custom { padding: 0.5em 0.8em 0.8em 2em; }
		* html a:hover { background: transparent; }
		.classic {background: #f0f0f0; border: 1px solid #e0e0e0; }
		.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
		.help { background: #00ff00; border: 1px solid #2BB0D7;	}
		.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
		.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
		&lt;/style&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;h1&gt;Membuat ToolTips dengan CSS&lt;/h1&gt;
		&lt;p&gt;	Contoh tooltips jenis &lt;a class=&quot;tooltip&quot; href=&quot;#&quot;&gt;Classic
			&lt;span class=&quot;custom classic&quot;&gt;
			&lt;em&gt;Classic&lt;/em&gt;
			Ini adalah contoh CSS tooltip jenis Classic,&lt;br/&gt; Silakah Anda coba buat sendiri!&lt;/span&gt;
			&lt;/a&gt;
		&lt;/p&gt; 
		&lt;p&gt;	Contoh tooltips jenis &lt;a class=&quot;tooltip&quot; href=&quot;#&quot;&gt;Warning
			&lt;span class=&quot;custom warning&quot;&gt;
			&lt;img src=&quot;Warning.png&quot; alt=&quot;Information&quot; height=&quot;48&quot; width=&quot;48&quot; /&gt;
			&lt;em&gt;Warning&lt;/em&gt;
			Ini adalah contoh CSS tooltip jenis Warning,&lt;br/&gt; Silakah Anda coba buat sendiri!&lt;/span&gt;
			&lt;/a&gt;
		&lt;/p&gt; 
		&lt;p&gt;	Contoh tooltips jenis &lt;a class=&quot;tooltip&quot; href=&quot;#&quot;&gt;Critical
			&lt;span class=&quot;custom critical&quot;&gt;
			&lt;img src=&quot;Critical.png&quot; alt=&quot;Help&quot; height=&quot;48&quot; width=&quot;48&quot; /&gt;
			&lt;em&gt;Critical&lt;/em&gt;
			Ini adalah contoh CSS tooltip jenis Critical,&lt;br/&gt; Silakah Anda coba buat sendiri!&lt;/span&gt;
			&lt;/a&gt;
		&lt;/p&gt; 
		&lt;p&gt;	Contoh tooltips jenis &lt;a class=&quot;tooltip&quot; href=&quot;#&quot;&gt;Help
			&lt;span class=&quot;custom help&quot;&gt;
			&lt;img src=&quot;Help.png&quot; alt=&quot;Help&quot; height=&quot;48&quot; width=&quot;48&quot; /&gt;
			&lt;em&gt;Help&lt;/em&gt;
			Ini adalah contoh CSS tooltip jenis Help,&lt;br/&gt; Silakah Anda coba buat sendiri!&lt;/span&gt;
			&lt;/a&gt;
		&lt;/p&gt; 
		&lt;p&gt;	Contoh tooltips jenis &lt;a class=&quot;tooltip&quot; href=&quot;#&quot;&gt;Information
			&lt;span class=&quot;custom info&quot;&gt;
			&lt;img src=&quot;Info.png&quot; alt=&quot;Information&quot; height=&quot;48&quot; width=&quot;48&quot; /&gt;
			&lt;em&gt;Information&lt;/em&gt;
			Ini adalah contoh CSS tooltip jenis Information,&lt;br/&gt; Silakah Anda coba buat sendiri!&lt;/span&gt;
			&lt;/a&gt;
		&lt;/p&gt; 
	&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba.

Nb. Gambar icon untuk tooltips Anda siapkan terlebih dahulu.

Membuat Menu Akordion Dengan CSS

Leave a reply

Menu Accordion

Menu Accordion

Menu akordion dapat dibuat dengan javascript library jquery, namun disini kita hanya menggunakan CSS untuk membuat menu akordion yang cukup responsive.

Berikut ini coding HTML dan CSS-nya.

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Menu Akordion Dengan CSS&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
*{font-family:Helvetica,Arial,sans-serif;}
#container
{	margin:left;
	background-color:#f0f0f0;
	width:300px;
	padding:10px;
	border-radius:15px;
}
.akordion h3 + div
{	height:0;
	overflow:hidden;
	-webkit-transition:height 0.3s ease-in;
	background-color:#ffffff;
	border-radius:10px;
}
.akordion :target h3 + div 
{	height:100px;
	padding-left:10px;
}
.akordion .section.large:target h3 + div 
{	overflow: auto;}
div.section 
{	background-color:#c0c0c0;
	padding:5px;
	border:0px solid;
}
a:link {text-decoration:none;}
.akordion a:hover 
{text-decoration:underline; color:#ff0000;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Menu Akordion Dengan CSS&lt;/h1&gt;
&lt;hr&gt;
&lt;br&gt;
&lt;div id=&quot;container&quot;&gt;
	&lt;div class=&quot;akordion&quot;&gt;
	&lt;h2&gt;List Menu&lt;/h2&gt;
        &lt;div id=&quot;satu&quot; class=&quot;section&quot;&gt;
			&lt;h3&gt;&lt;a href=&quot;#satu&quot;&gt;Menu Satu&lt;/a&gt;&lt;/h3&gt;
			&lt;div&gt;&lt;ul&gt;
				&lt;li&gt;Sub Menu Satu&lt;/li&gt;
				&lt;li&gt;Sub Menu Dua&lt;/li&gt;
				&lt;li&gt;Sub Menu Tiga&lt;/li&gt;
			&lt;/ul&gt;&lt;/div&gt;
		&lt;/div&gt;
        &lt;div id=&quot;dua&quot; class=&quot;section&quot;&gt;
            &lt;h3&gt;&lt;a href=&quot;#dua&quot;&gt;Menu Dua&lt;/a&gt;&lt;/h3&gt;
			&lt;div&gt;&lt;ul&gt;
				&lt;li&gt;Sub Menu Satu&lt;/li&gt;
				&lt;li&gt;Sub Menu Dua&lt;/li&gt;
				&lt;li&gt;Sub Menu Tiga&lt;/li&gt;
			&lt;/ul&gt;&lt;/div&gt;
        &lt;/div&gt;
		&lt;div id=&quot;tiga&quot; class=&quot;section&quot;&gt;
			&lt;h3&gt;&lt;a href=&quot;#tiga&quot;&gt;Menu Tiga&lt;/a&gt;&lt;/h3&gt;
			&lt;div&gt;&lt;ul&gt;
				&lt;li&gt;Sub Menu Satu&lt;/li&gt;
				&lt;li&gt;Sub Menu Dua&lt;/li&gt;
				&lt;li&gt;Sub Menu Tiga&lt;/li&gt;
			&lt;/ul&gt;&lt;/div&gt;
        &lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Kuncinya adalah pada pseudo class selector :target di CSS.

pada class akordion diberikan pseudo class target ke elemen h3 dan div
.akordion :target h3 + div
Ketika link “satu” pada tag h3 di click maka URL akan menuju ke fragment identifier #satu dengan demikian div id=satu akan bekerja membuka section class=satu. Begitu juga ketika link dua atau tiga di click.

Selamat mencoba.

Membuat Efek Text Berkedip dengan JavaScript

Leave a reply

blinking tag

blinking tag

Tahukah anda bahwa blink adalah element html (html tag) non-standard yang biasa dipakai untuk mempresentasikan text berkedip pada web browser (efek alternate antara visible dan invisible). Element blink ini awalnya (1990-an) diperkenalkan pada Netscape Navigator lalu beberapa web browser men-support-nya, namun kemudian dihilangkan dari Internet Explorer. Saat ini (2013) hanya browser Opera saja yang mensupport-nya.

Nah, buat Anda yang masih membutuhkan efek blinking text maupun background, bisa menggunakan JavaScript dan CSS pada contoh coding berikut ini.

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Blinking&lt;/title&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var x=1;
function blink(id) {
	document.getElementById(id).style.width=&quot;300px&quot;;
	if(x==1){
		document.getElementById(id).style.backgroundColor = &quot;red&quot;;
		x=2;
	} else {
		document.getElementById(id).style.backgroundColor = &quot;&quot;;
		x=1;
	}
}
window.onload=function(){
setInterval(&quot;blink('alert')&quot;, 500);}

var blink_speed = 500; // every 1000 == 1 second, adjust to suit
var t = setInterval(function () {
    var ele = document.getElementById('blinkingtext');
    ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);
&lt;/script&gt;

&lt;style type=&quot;text/css&quot;&gt;
div#blinkingtextarea
{	width:200px; padding: 8px;
	text-align:center;background-Color:#ff0000;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div id=&quot;blinkingtextarea&quot;&gt;
&lt;div id=&quot;blinkingtext&quot;&gt;Blinking Text&lt;/div&gt;
&lt;/div&gt;

	

&lt;div id=&quot;alert&quot;&gt;Blinking Background&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

Selamat mencoba.

 

Update (April 2016)

Saya teringat 2 prinsip:

  1. Dahulukan menggunakan CSS daripada JavasScript
  2. Coding KISS – keep it simple and short for coding

Maka dengan googlng saya dapatkan cara membuat blinking text dengan 2 cara :

Cara pertama pakai CSS3:

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Blinking CSS3&lt;/title&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.blinktext{
   animation:blinker 1s linear infinite;
}
@keyframes blinker {
   50% { opacity:0.0; }
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
   &lt;div class=&quot;blinktext&quot;&gt; Blinking Text dengan CSS &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Cara kedua pakai Simple JavaScript dengan JQuery

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Blinking CSS3&lt;/title&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;blinktext2&quot;&gt; Blinking Text dengan JS&lt;/div&gt;
&lt;/body&gt;
&lt;script src=&quot;jquery-2.1.3.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(function blink() {
    $('.blink_me').fadeOut(500).fadeIn(500, blink); 
});
&lt;/script&gt;
&lt;/html&gt;

Selamat mencoba.

Membuat Expand-Collapse Toggle Element Div

Leave a reply

Kali ini saya akan menunjukan cara membuat Expand-Collapse Toggle Element Div.
Berikut ini tampilannya pada saat kondisi expand div, content div akan show.

ShowDivExpand

Jika kita click icon collapse maka content div akan hide seperti tampilan berikut ini.

ShowDivCollapsed

Pertama kita siapkan coding HTML sebagai berikut:

&lt;body&gt;
Click collapse/expand image to toggle the content below.
&lt;div id=&quot;headerDiv&quot;&gt;
	&lt;a id=&quot;imgHeader&quot; href=&quot;javascript:toggle('myContent','imgHeader');&quot;&gt;
	&lt;img title=&quot;Collapse&quot; alt=&quot;&quot; src=&quot;collapse.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;
&lt;div id=&quot;titleText&quot;&gt;Demo Toggle Element Div&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;clear: both;&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;contentDiv&quot;&gt;
&lt;div id=&quot;myContent&quot; style=&quot;display: block;&quot;&gt;
&lt;ul&gt;
	&lt;li&gt;This is line one of the content.&lt;/li&gt;
	&lt;li&gt;This is line two of the content.&lt;/li&gt;
	&lt;li&gt;This is line three of the content.&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;clear: both;&quot;&gt;&lt;/div&gt;
This is the demo of collapse/expand element.
&lt;/body&gt;

Kemudian kita berikan sentuhan presentasi dengan CSS berikut:

&lt;style type=&quot;text/css&quot;&gt;
#headerDiv, #contentDiv {float:left;width:510px;}
#headerDiv a {float:right;margin:10px 10px 5px 5px;}
#myHeader {font-size:1.1em;font-weight:bold;margin:5px;float:left;}
#titleText {font-size:1.3em;font-weight:bold;margin:8px;}
#headerDiv {background-color:#a0a0a0;color:#ffffff;}
#contentDiv {background-color:#f0f0f0;}
#myContent {margin:1px;}
&lt;/style&gt;

Icon berupa image expand.png dan collapse.png bisa Anda buat sendiri dengan dengan print screen di MS Paint.
Ketika user click icon collapse maka #contentDiv akan dibuat hidden oleh Javascript.
Begitu juga ketika user click icon expand maka #contentDiv akan dibuat show oleh Javascript.
Berikut ini coding javascriptnya:

&lt;script type=&quot;text/javascript&quot;&gt;
function toggle(showHideDiv, switchImgTag) {
	var ele = document.getElementById(showHideDiv);
	var imageEle = document.getElementById(switchImgTag);
	if(ele.style.display == &quot;block&quot;) {
		ele.style.display = &quot;none&quot;;
		imageEle.innerHTML = '&lt;img src=&quot;expand.png&quot; title=&quot;Expand&quot; border=0&gt;';
	}
	else {
		ele.style.display = &quot;block&quot;;
		imageEle.innerHTML = '&lt;img src=&quot;collapse.png&quot; title=&quot;Collapse&quot; border=0&gt;';
	}	
} 
&lt;/script&gt;

Saya sudah mencobanya dan berhasil dengan baik. Selamat mencoba.

Menampilkan Jam dan Tanggal dengan JavaScript

Leave a reply

Show Date Time for Real

Show Date Time for Real

Menampilkan tanggal dan jam secara real time dapat dilakukan dengan JavaScript.

Berikut ini coding JavaScript untuk tampilan seperti diatas:

function startTime()
{ 	var today=new Date();
	var weekday=new Array(7);
	var weekday=[&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Tuesday&quot;,&quot;Wednesday&quot;,&quot;Thursday&quot;,&quot;Friday&quot;,&quot;Saturday&quot;];
	var monthname=new Array(12);
	var monthname=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];
	var dayname=weekday[today.getDay()];
	var day=today.getDate();
	var month=monthname[today.getMonth()]; 
	var year=today.getFullYear();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();
	h=checkTime(h);
	m=checkTime(m);
	s=checkTime(s);
	document.getElementById('clocktime').innerHTML=dayname+&quot;, &quot;+day+&quot;-&quot;+month+&quot;-&quot;+year+&quot;, &quot;+h+&quot;:&quot;+m+&quot;:&quot;+s;
	t=setTimeout(function(){startTime()},500);
}
// function checkTime to add a zero in front of numbers &lt; 10
function checkTime(i)
{	if(i&lt;10){i=&quot;0&quot;+i;}
	return i;
}

Berikut ini coding HTML yang memanggil fungsi javascript tersebut:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My Application&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/time.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body onload=&quot;startTime()&quot;&gt;
&lt;table bgcolor=&quot;#0000ff&quot; width=&quot;100%&quot; cellpadding=&quot;5&quot;&gt; 
&lt;tr&gt;&lt;td width=&quot;33%&quot;&gt;My Application&lt;/td&gt;&lt;td align=&quot;right&quot;&gt;
&lt;span id=&quot;clocktime&quot;&gt;&lt;/span&gt; :: Welcome, Super Administrator | Logout&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

 
Anda Juga bisa menggunakan method javascript toLocaleDateString() dengan parameter format dibawah ini.

&lt;div id=&quot;date&quot; style=&quot;font:bold 12pt Arial;background:#00ffff;width:100%;&quot;&gt;&lt;/div&gt; 
&lt;script&gt;
function displayTime() {  
const now = new Date(); // Get current time
const formattedDate = now.toLocaleDateString('en-GB',
  {day: 'numeric', month: 'short', year: 'numeric'})
  .replace(/ /g, '-');
document.getElementById(&quot;date&quot;).innerHTML = formattedDate + 
  &quot; &quot; + now.toLocaleTimeString('it-IT');
setTimeout(displayTime, 1000); 
}
window.onload = displayTime; 
&lt;/script&gt;

 
Selamat mencoba.

Membuat Object Koneksi AJAX Ke Server

Leave a reply

Logo AJAX

Logo AJAX

AJAX (Asynchronous JavaScript and XML) adalah teknik pemrograman web dengan memberdayakan JavaScript untuk membuat aplikasi web dimana pertukaran data antara web browser dan server terjadi secara asynchronous. AJAX memungkinkan kita untuk meng-update bagian tertentu dari halaman web tanpa perlu me-reload seluruh halaman.

Latar belakang munculnya AJAX:

  • Terjadi perbedaan mencolok antara aplikasi desktop dan aplikasi website dimana aplikasi desktop lebih responsif dan interaktif.
  • Aplikasi website lebih mudah dalam hal implementasi, cukup sekali pasang di server (install once run anywhere), semua user dapat menggunakannya tanpa perlu instalasi/update pada desktop mereka.
  • Javasript memungkinkan aplikasi web lebih dinamis dan interaktif. Proses request-respond dengan javascript awalnya masih tinggi dan data yang dikirim oleh server cukup besar (satu webpage), sehingga aplikasi web menjadi lambat.
  • Jesse James Garrett dari Adaptive Paths (Feb 2005) memperkenalkan istilah AJAX dalam teknik pemrograman web , dan kemudian menjadi web standard secara official oleh W3C (Apr 2006)
  • AJAX memungkinkan JavaScript membuat website lebih responsif dan interaktif seperti aplikasi desktop (client-server) dimana proses request-respond dapat dilakukan secara asinkron, hanya sebagian dari halaman web yang reload dibandingkan seluruh halaman web.

AJAX bukanlah bahasa pemrograman web baru ataupun teknologi web baru melainkan merupakan gabungan dari teknik pemrograman web standard yang telah ada, yakni:

  • XHTML (Extensible HyperText Markup Language)
  • CSS (Cascading Style Sheets)
  • DOM (Document Object Model)
  • XML (Extensible Markup Language)
  • JavaScript dengan object XMLHttpRequest

Berikut ini fungsi umum AJAX untuk membuat object koneksi ke web server.

var xmlHttp = buatObjekXmlHttp();
function buatObjekXmlHttp()
{  var obj = null;
if (window.ActiveXObject)
obj = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
else
if (window.XMLHttpRequest)
obj = new XMLHttpRequest();
if (obj == null)
document.write(&quot;Browser tidak mendukung XMLHttpRequest&quot;);
return obj;
}

Perbandingan Model Aplikasi Web Klasik dan AJAX

Perbandingan Model Aplikasi Web Klasik dan AJAX

Dalam coding JavaScript tradisional, jika kita ingin mendapatkan informasi dari database atau file di server, atau mengirim informasi ke server, kita menggunakan method GET atau POST data ke server. User mengklik tombol “Submit” untuk mengirim / mendapatkan informasi, menunggu respon dari server, dan kemudian halaman baru akan loading hasilnya.

Karena server mengembalikan sebuah halaman baru setiap kali user melakukan request, aplikasi web tradisional menjadi lebih lambat dan cenderung kurang user-friendly. Dengan AJAX, JavaScript berkomunikasi langsung dengan server, melalui objek XMLHttpRequest.

Dengan HTTP request, web browser akan mendapatkan respon dari server web tanpa reload seluruh halaman. User akan tetap pada halaman yang sama, dan ia tidak akan melihat bahwa permintaan script, atau mengirim data ke server secara background.

Berikut ini beberapa kemampuan AJAX secara umum:

  • Real time validation
  • Partial web page update, contoh: Pengecekan username, password atau data field lainnya
  • Auto Complete / Auto Suggest, contoh: google search
  • Load on demand, dimana proses pengiriman dan pengambilan data ke dan dari server secara background
  • Refresh data dan server push, contoh: web menampilkan nilai tukar mata uang atau stock exchange, ramalan cuaca dll
  • Mashup (pencampuran aplikasi data dalam satu halaman)
  • Online Chat / shutbox
  • RSS Feed untuk subscribe website.

Keuntungan penggunaan AJAX :

  • Mengurangi penggunaan bandwidth yang berlebihan
  • Meningkatkan produktivitas dengan mempercepat proses interaksi website & user
  • Mengurangi development time sehingga menghemat biaya pengembangan website

Kekurangan/dampak penggunaan AJAX:

  • Karena alamat halaman tidak berubah ketika proses request-respond, maka tidak mudah untuk membuat bookmark suatu halaman web yang berbasis ajax
  • Search engine kemungkinan tidak dapat meng-index seluruh bagian halaman web
  • Tombol back pada browser menjadi tidak berfungsi karena seluruh aksi terjadi di halaman web yang sama
  • Tidak semua browser support AJAX
  • Aplikasi AJAX menjadi tidak berfungsi jika user men-disable JavaScript pada browser clientnya.

Read Write File Dengan JavaScript

Leave a reply

Read Write File dengan JavaScript

Read Write File dengan JavaScript

JavaScript bekerja di client web browser. Program berikut ini adalah contoh operasi read & write file dengan menggunakan ActiveXObject yang ada di JavaScript. ActiveXObject ini hanya bekerja di browser Microsoft Internet Explorer (IE).

Pertama kita sediakan form berisi field textarea1 dan input textbox1 serta sebuah input button. Field textarea1 digunakan untuk menampilkan content dari file dan field input textbox1 digunakan untuk memasukan text ke dalam file bernama chat.txt.
Ketika input text dimasukan lalu tekan tombol enter atau tombol Post maka text akan JavaScript akan menulis ke dalam file chat.txt lalu membacanya dan ditampilkan ke textarea.

&lt;body&gt;
&lt;h2&gt;Chat History&lt;/h2&gt;
&lt;form name=&quot;form1&quot;&gt;
&lt;textarea name=&quot;textarea1&quot; id=&quot;textarea1&quot; rows=&quot;10&quot; cols=&quot;50&quot;&gt; &lt;/textarea&gt; &lt;br&gt;&lt;br&gt;
Say: &lt;input type=&quot;text&quot; name=&quot;textbox1&quot; onKeyPress=&quot;return handleKeyPress(this,event)&quot;&gt;
&lt;input type=&quot;Button&quot; value=&quot;Post&quot; onClick='SayIt()'&gt;
&lt;/form&gt;
&lt;/body&gt;

Berikut ini coding JavaScriptnya. Ada 2 fucnction yaitu SayIt() dan handleKeyPress(myfield,e). Function SayIt() akan melakukan proses read write file dan function handleKeyPress(myfield,e) untuk menangani input tombol enter pada field textbox1.

function SayIt()
{	var SayDateTime = new Date();
	var fso = new ActiveXObject(&quot;Scripting.FileSystemObject&quot;);
	var flp = fso.OpenTextFile(&quot;D:\\chat.txt&quot;, 8,false);
	var valtextbox1 = document.form1.textbox1.value;
	flp.WriteLine(SayDateTime);
	flp.WriteLine(valtextbox1);
	flp.Close();
	var flp = fso.OpenTextFile(&quot;D:\\chat.txt&quot;, 1, true);
	FileContents = flp.ReadAll();
	document.form1.textarea1.value=FileContents;
	var textarea = document.getElementById('textarea1');
	textarea.scrollTop = textarea.scrollHeight;
	document.form1.textbox1.value = &quot;&quot;;
	flp.Close();
}
function handleKeyPress(myfield,e)
{	var keycode;
	if (window.event) keycode = window.event.keyCode;
	else if (e) keycode = e.which;
	else return true;
	if (keycode == 13)
	{	SayIt();
		return false;
	}
	else return true;
}

Coding ini hanya memberikan gambaran cara kerja ActivexObject dalam JavaScript yang berlaku di Microsoft Internet Explorer.
Jika Anda ingin menggunakannya di server sebagai aplikasi chating atau shutbox, tentu harus menggunakan script yang bekerja di server, seperti ASP atau PHP.

Membaca Informasi Browser Dengan JavaScript

Leave a reply

Browser Info

Ada kalanya kita ingin mendapatkan informasi web browser apa yang digunakan oleh user, apakah IE, Mozilla Firefox, Chrome, atau Opara. Dengan object navigator yang disediakan oleh JavaScript, kita dapat membuat coding untuk men-deteksi web browser apa yang digunakan oleh user.

Berikut ini coding HTML dan Javascript selengkapnya.

&lt;html&gt;
&lt;body&gt;
&lt;div id=&quot;example&quot;&gt;&lt;/div&gt;
&lt;script&gt;
txt = &quot;&lt;p&gt;Browser CodeName: &quot; + navigator.appCodeName + &quot;&lt;/p&gt;&quot;;
txt+= &quot;&lt;p&gt;Browser Name: &quot; + navigator.appName + &quot;&lt;/p&gt;&quot;;
txt+= &quot;&lt;p&gt;Browser Version: &quot; + navigator.appVersion + &quot;&lt;/p&gt;&quot;;
txt+= &quot;&lt;p&gt;Cookies Enabled: &quot; + navigator.cookieEnabled + &quot;&lt;/p&gt;&quot;;
txt+= &quot;&lt;p&gt;Platform: &quot; + navigator.platform + &quot;&lt;/p&gt;&quot;;
txt+= &quot;&lt;p&gt;User-agent header: &quot; + navigator.userAgent + &quot;&lt;/p&gt;&quot;;
txt+= &quot;&lt;p&gt;User-agent language: &quot; + navigator.systemLanguage + &quot;&lt;/p&gt;&quot;;
document.getElementById(&quot;example&quot;).innerHTML=txt;
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ 
	var ffversion=new Number(RegExp.$1) 
	document.write(&quot;You're using Firefox &quot; + ffversion) 
}
else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ 
	var ieversion=new Number(RegExp.$1) 
	document.write(&quot;You're using IE &quot; + ieversion)
}
else if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ 
	var oprversion=new Number(RegExp.$1) 
	document.write(&quot;You're using Opera &quot; + oprversion)
}
else if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ 
	var chromeversion=new Number(RegExp.$1) 
	document.write(&quot;You're using Chrome &quot; + chromeversion)
}
else
	document.write(&quot;Browser name is unknown.&quot;)
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Kita dapat mengembangkan coding ini untuk mendeteksi browser lainnya, seperti Safari. Kita juga dapat memodifikasi coding ini untuk berjalan di server dan menyimpan informasi browser yang digunakan oleh user di database.

Membuat Table Zebra Hover

Leave a reply

Table Zebra Hover

Table Zebra Hover

Table Zebra Hover adalah table dengan 2 warna barisnya selang seling yang ketika disorot / highlight dengan mouse pointer akan berubah warna barisnya.

Sebenarnya kita dapat membuat table zebra hover ini baik dengan CSS maupun javascript. Namun di sini kita akan gunakan CSS, karena secara performance lebi baik.

Berikut ini struktur HTML untuk membuat tablenya.

&lt;body&gt;
&lt;table id=&quot;table-a&quot;&gt;
	&lt;thead&gt;
	&lt;tr&gt;&lt;th&gt;Header 1&lt;/th&gt;&lt;th&gt;Header 2&lt;/th&gt;	&lt;th&gt;Header 3&lt;/th&gt;&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
	&lt;tr&gt;&lt;td&gt;Item 1A&lt;/td&gt;&lt;td&gt;Item 1B&lt;/td&gt;&lt;td&gt;Item 1C&lt;/td&gt;&lt;/tr&gt;
	&lt;tr&gt;&lt;td&gt;Item 2A&lt;/td&gt;&lt;td&gt;Item 2B&lt;/td&gt;&lt;td&gt;Item 2C&lt;/td&gt;&lt;/tr&gt;
	&lt;tr&gt;&lt;td&gt;Item 3A&lt;/td&gt;&lt;td&gt;Item 3B&lt;/td&gt;&lt;td&gt;Item 3C&lt;/td&gt;&lt;/tr&gt;
	&lt;tr&gt;&lt;td&gt;Item 4A&lt;/td&gt;&lt;td&gt;Item 4B&lt;/td&gt;&lt;td&gt;Item 4C&lt;/td&gt;&lt;/tr&gt;
	&lt;tr&gt;&lt;td&gt;Item 5A&lt;/td&gt;&lt;td&gt;Item 5B&lt;/td&gt;&lt;td&gt;Item 5C&lt;/td&gt;&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;
&lt;/body&gt;

Untuk presentasinya kita buat dengan coding CSS sehingga table akan berbentuk zebra (2 warna) dan ketika barisnya di highlight / hover akan berubah warna.

#table-a
{	font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, Sans-Serif;
	font-size: 12px;
	width: 500px;
	text-align: center;
	border-collapse: collapse;
}
#table-a th
{	font-size: 13px;
	font-weight: normal;
	padding: 8px;
	background: #b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: #039;
}
#table-a td
{	padding: 8px;
	background: #e8edff;
	border-bottom: 1px solid #fff;
	color: #669;
	border-top: 1px solid transparent;
}
#table-a tr:hover td
{	background: #d0dafd;
	color: #339;
}

Kita dapat memodifikasi tabel zebra hover ini dengan mengembangkan struktur dan presentasinya.

Membuat Menu Horisontal Dengan CSS

Leave a reply

menu horisontal

Menu horisontal

Mengapa dengan CSS? mengapa tidak dengan JavaScript?

Pada prinsipnya loading CSS lebih cepat dari pada JavaScript. Inilah alasannya mengapa kita lebih mengutamakan menggunakan CSS ketimbang JavaScript. JavaScript memang bisa melakukan operasi apa saja dalam website, tapi performance CSS masih lebih baik. Jika bisa dilakukan dengan CSS kenapa harus JavaScript.

Menu horisontal atau dropdown menu umumnya terdapat pada setiap website. Menu digunakan untuk memudahkan kita melakukan navigasi content dalam sebuah website.

Untuk membuat menu horisontal, pertama kita tulis struktur HTML-nya berikut ini.

&lt;ul id=&quot;menu&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;About&lt;/a&gt;
  	&lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;The Team&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;History&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Vision&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;Products&lt;/a&gt;
  	&lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Cozy Couch&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Great Table&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Small Chair&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Shiny Shelf&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Invisible Nothing&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;&quot;&gt;Contact&lt;/a&gt;
  	&lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Online&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Right Here&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;&quot;&gt;Somewhere Else&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;

Setelah itu kita buat presentasinya dengan CSS berikut ini.

ul {
	font-family: Arial, Verdana;
	font-size: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	display: block;
	position: relative;
	float: left;
}
li ul {
	display: none;
}
ul li a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	border-top: 1px solid #ffffff;
	padding: 5px 15px 5px 15px;
	background: #2C5463;
	margin-left: 1px;
	white-space: nowrap;
}
ul li a:hover {
	background: #617F8A;
}
li:hover ul {
	display: block;
	position: absolute;
}
li:hover li {
	float: none;
	font-size: 14px;
}
li:hover a {
	background: #617F8A;
}
li:hover li a:hover {
	background: #95A9B1;
}

Menu dropdown horisontal ini juga dapat bekerja dengan baik di browser MSIE.

Membuat Layout Website

Leave a reply

layout2kolom

Layout 2 kolom

Hal pertama dalam pembuatan sebuah website adalah membuat layout website. Ada 2 cara pembuatan layout website, yakni: dengan struktur table dan dengan struktur div.

Contoh coding layout website dengan struktur table:

&lt;table width=&quot;80%&quot; border=&quot;1&quot; cellspacing=&quot;0&quot; align=&quot;center&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td colspan=&quot;2&quot; align=&quot;center&quot;&gt;HEADER GOES HERE&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=&quot;center&quot; width=&quot;24%&quot; height=&quot;245&quot;&gt;
LEFT CONTENT GOES HERE&lt;/td&gt;
&lt;td align=&quot;center&quot; width=&quot;76%&quot;&gt;
RIGHT CONTENT GOES HERE&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan=&quot;2&quot; align=&quot;center&quot;&gt;FOOTER GOES HERE&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

Contoh coding layout website dengan struktur div:

&lt;div id=&quot;page&quot;&gt;
&lt;div id=&quot;header&quot;&gt;
&lt;h1&gt;HEADER GOES HERE&lt;/h1&gt;
&lt;/div&gt;
&lt;div id=&quot;leftcontent&quot;&gt;
&lt;h3&gt;LEFT CONTENT GOES HERE&lt;/h3&gt;
&lt;/div&gt;
&lt;div id=&quot;rightcontent&quot;&gt;
&lt;h2&gt;RIGHT CONTENT GOES HERE&lt;/h2&gt;
&lt;/div&gt;
&lt;div id=&quot;footer&quot;&gt;
&lt;h4&gt;FOOTER GOES HERE&lt;/h4&gt;
&lt;/div&gt;
&lt;/div&gt;

Coding layout website dengan struktur table terlihat lebih banyak dibandingkan dengan struktur div, dengan kata lain struktur table lebih kompleks daripada struktur div. Tabel jauh dari clean code dan mengandung semantik. Semantik dari table adalah menampilkan data (data table). Struktur table yang lebih kompleks akan mempengaruhi development time dan maintenance website nantinya . Coding yang lebih banyak tentu akan mempengaruhi kinerja website pada saat loading.

Dengan struktur div kita akan dapat lebih banyak mengatur presentasinya dengan CSS. Dengan memisahkan struktur dan presentasi akan memudahkan coding dan maintenance website.

@charset &quot;utf-8&quot;;
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	text-align: center;
}
#page {
	border: 3px solid #c0c0c0;
	margin: 0 auto;
	width: 960px;
	height:1000px
	text-align: left;
}
#header {
	border: 3px solid #c0c0c0;
	height: 192px;
}
#leftcontent {
	border: 3px solid #c0c0c0;
	float: left;
	width: 192px;
	height: 700px;
}
#rightcontent {
	border: 3px solid #c0c0c0;
	float: left;
	width: 756px; /*kurang 12px*/
	height: 700px;
}
#footer {
	border: 3px solid #c0c0c0;
	clear: left;
	height: 100px;
}

Kita dapat mengembangkan website ini dengan mudah dengan modifikasi html maupun CSS-nya.