Posts

Membuat Form Validasi Kartu Kredit

Dalam tutorial ini kami akan berbagi cara untuk membuat form kartu kredit sederhana. Kita akan membangun semuanya dari awal, dengan sedikit bantuan dari Bootstrap 3 untuk interfacenya dan Payform.js untuk form validasi client-side.

Overview projek

Berikut adalah tampilan akhir hasil dari tutorial ini.

credit-card-form

Anda bisa mendapatkan full code untuk projek ini dengan klik link download. Gambaran dari file dapat dilihat dibawah ini:

project-overview

Ada dua file .css dan dua file .js yang akan kita butuhkan untuk memasukan dalam HTML kita. Semua source lain seperti framework Bootstrap, jQuery, dan font web akan dimasukan secara eksternal melalui CDN.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Credit Card Validation Demo</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/demo.css">
</head>

<body>

    <!-- The HTML for our form will go here -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="assets/js/jquery.payform.min.js" charset="utf-8"></script>
    <script src="assets/js/script.js"></script>
</body>
</html>

Sekarang semuanya sudah diatur, kita dapat mulai membangun form kartu kredit Anda. Mari kita mulai dengan layout HTML!

Layout

Sebuah dialog kartu kredit harus sederhana, singkat dan lugas. Berikut adalah empat input fields bahwa setiap form kartu kredit harus memiliki:

  • Nama pemilik kartu kredit
  • Nomor kartu
  • Kode rahasia (juga dikenal sebagai CVV / CVC / CID)
  • Tanggal kadaluarsa

Semua yang perlu kita lakukan adalah membuat <form> dan menambahkan semua field input yang diperlukan. Untuk nama pemilik, nomor kartu dan CVV kita akan menggunakan teks field sederhana. Untuk tanggal  kadaluarsa kita akan menempatkan kombinasi dua penyeleksi dengan pilihan yang telah ditetapkan untuk membuat bulan dan tahun

Selain itu formnya kita beri judul, button dan gambar untuk vendor kartu kredit populer. Karena kita menggunakan Bootstrap maka ada markup tambahan sedikit, tapi hal itu akan membantu menjaga kode terorganisir dan layout responsif.

<div class="creditCardForm">
    <div class="heading">
        <h1>Confirm Purchase</h1>
    </div>
    <div class="payment">
        <form>
            <div class="form-group owner">
                <label for="owner">Owner</label>
                <input type="text" class="form-control" id="owner">
            </div>
            <div class="form-group CVV">
                <label for="cvv">CVV</label>
                <input type="text" class="form-control" id="cvv">
            </div>
            <div class="form-group" id="card-number-field">
                <label for="cardNumber">Card Number</label>
                <input type="text" class="form-control" id="cardNumber">
            </div>
            <div class="form-group" id="expiration-date">
                <label>Expiration Date</label>
                <select>
                    <option value="01">January</option>
                    <option value="02">February </option>
                    <option value="03">March</option>
                    <option value="04">April</option>
                    <option value="05">May</option>
                    <option value="06">June</option>
                    <option value="07">July</option>
                    <option value="08">August</option>
                    <option value="09">September</option>
                    <option value="10">October</option>
                    <option value="11">November</option>
                    <option value="12">December</option>
                </select>
                <select>
                    <option value="16"> 2016</option>
                    <option value="17"> 2017</option>
                    <option value="18"> 2018</option>
                    <option value="19"> 2019</option>
                    <option value="20"> 2020</option>
                    <option value="21"> 2021</option>
                </select>
            </div>
            <div class="form-group" id="credit_cards">
                <img src="assets/images/visa.jpg" id="visa">
                <img src="assets/images/mastercard.jpg" id="mastercard">
                <img src="assets/images/amex.jpg" id="amex">
            </div>
            <div class="form-group" id="pay-now">
                <button type="submit" class="btn btn-default" id="confirm-purchase">Confirm</button>
            </div>
        </form>
    </div>
</div>

Sekarang kita memiliki field input yang dibutuhkan, kita dapat mengatur aturan validasi.

Validation

Semua validasi akan menunjukan client side dan dilakukan secara eksklusif di JavaScript. Dan untuk validasi pada HTML Anda bisa melihatnya pada postingan sebelumnya. untuk memulainya dengan mendefinisikan semua selektor jQuery yang kita butuhkan :

var owner = $('#owner'),
    cardNumber = $('#cardNumber'),
    cardNumberField = $('#card-number-field'),
    CVV = $("#cvv"),
    mastercard = $("#mastercard"),
    confirmButton = $('#confirm-purchase'),
    visa = $("#visa"),
    amex = $("#amex");

Kemudian, menggunakan Payform.js, kita akan mengubah field input dasar kita menjadi inputan khusus untuk data kartu kredit. Kita hanya perlu memanggil fungsi yang tepat dan library secara otomatis akan menangani format teks dan panjang string maksimum bagi kita :

cardNumber.payform('formatCardNumber');
CVV.payform('formatCardCVC');

Selanjutnya kita ingin dapat memberikan umpan balik real-time kepada pengguna saat mereka mengetik di nomor kartu mereka. Untuk melakukannya kami akan menulis fungsi sederhana yang melakukan dua hal :

  1. Periksa apakah teks field yang diinputkan adalah nomor kartu valid atau tidak. Tambahkan pewarna sesuai dengan bidang teks.
  2. Tergantung pada input karakter ini, lihat jika kartu selain Visa, MasterCard atau American Express. Hal ini dilakukan dengan menggunakan method payform.parseCardType()

Karena kita ingin melakukan eksekusi diatas setiap kali karakter baru yang diketik menggunakan jQUery keyup() event.

cardNumber.keyup(function() {
    amex.removeClass('transparent');
    visa.removeClass('transparent');
    mastercard.removeClass('transparent');

    if ($.payform.validateCardNumber(cardNumber.val()) == false) {
        cardNumberField.removeClass('has-success');
        cardNumberField.addClass('has-error');
    } else {
        cardNumberField.removeClass('has-error');
        cardNumberField.addClass('has-success');
    }

    if ($.payform.parseCardType(cardNumber.val()) == 'visa') {
        mastercard.addClass('transparent');
        amex.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'amex') {
        mastercard.addClass('transparent');
        visa.addClass('transparent');
    } else if ($.payform.parseCardType(cardNumber.val()) == 'mastercard') {
        amex.addClass('transparent');
        visa.addClass('transparent');
    }
});

Ada satu hal lagi yang harus kita lakukan adalah memeriksa apakah semua field memegang data yang valid ketika user mencoba untuk mengirimkan form.

Nama validasi bisa sangat rumit. Untuk menjaga pencahayaan pada tutorial ini, kita tidak akan menuju subjek, dan kita hanya akan memeriksa apakah  inputan nama minimal 5 karakter. Payform memberikan metode yang diperlukan untuk memvalidasi sisa formulir.

confirmButton.click(function(e) {
    e.preventDefault();

    var isCardValid = $.payform.validateCardNumber(cardNumber.val());
    var isCvvValid = $.payform.validateCardCVC(CVV.val());

    if(owner.val().length < 5){
        alert("Wrong owner name");
    } else if (!isCardValid) {
        alert("Wrong card number");
    } else if (!isCvvValid) {
        alert("Wrong CVV");
    } else {
        // Everything is correct. Add your form submission code here.
        alert("Everything is correct");
    }
});

Style

Kita akan menggunakan Bootstrap, sehingga sebagian besar styling dilakukan oleh framework. Sebagian besar meliputi field input dan berbagai padding, margin dan font tweak.

styles.css

.creditCardForm {
    max-width: 700px;
    background-color: #fff;
    margin: 100px auto;
    overflow: hidden;
    padding: 25px;
    color: #4c4e56;
}
.creditCardForm label {
    width: 100%;
    margin-bottom: 10px;
}
.creditCardForm .heading h1 {
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #4c4e56;
}
.creditCardForm .payment {
    float: left;
    font-size: 18px;
    padding: 10px 25px;
    margin-top: 20px;
    position: relative;
}
.creditCardForm .payment .form-group {
    float: left;
    margin-bottom: 15px;
}
.creditCardForm .payment .form-control {
    line-height: 40px;
    height: auto;
    padding: 0 16px;
}
.creditCardForm .owner {
    width: 63%;
    margin-right: 10px;
}
.creditCardForm .CVV {
    width: 35%;
}
.creditCardForm #card-number-field {
    width: 100%;
}
.creditCardForm #expiration-date {
    width: 49%;
}
.creditCardForm #credit_cards {
    width: 50%;
    margin-top: 25px;
    text-align: right;
}
.creditCardForm #pay-now {
    width: 100%;
    margin-top: 25px;
}
.creditCardForm .payment .btn {
    width: 100%;
    margin-top: 3px;
    font-size: 24px;
    background-color: #2ec4a5;
    color: white;
}
.creditCardForm .payment select {
    padding: 10px;
    margin-right: 15px;
}
.transparent {
    opacity: 0.2;
}
@media(max-width: 650px) {
    .creditCardForm .owner,
    .creditCardForm .CVV,
    .creditCardForm #expiration-date,
    .creditCardForm #credit_cards {
        width: 100%;
    }
    .creditCardForm #credit_cards {
        text-align: left;
    }
}

Tutorial membuat vorm validasi kartu kredit telah selesai semoga bermanfaat. Untuk Demo bisa dilihat pada link berikut

Pure.css Menawarkan Alternatif dari Bootstrap

Apa sih Pure.css itu?

Sementara ini Bootstrap telah mengambil alih sebagian besar web besar, dapat menempatkan sedikit beban kinerja di situs yang mungkin tidak diperlukan untuk proyek berikutnya. Pure.css adalah framework responsif Yahoo yang menawarkan tampilan yang minimalis, terdokumentasi dengan baik dan alternatif yang fleksibel.

Dalam tutorial ini, kita akan memperkenalkan kepada Anda tentang Pure “sebuah set kecil modul CSS responsif yang dapat Anda gunakan dalam setiap proyek web”. Kita akan meninjau serangkaian fitur dan keuntungan menggunakan Pure dan kemudian menjalankannya melalui beberapa contoh penggunaan dasar.

Memilih Platform

Pure menawarkan semua fitur-fitur umum yang Anda butuhkan dalam desain framework web standar. Jadi, apakah Anda sedang membangun sebuah tema untuk WordPress atau custom website Anda sendiri, Pure bisa menjadi pilihan yang baik.

Untuk manajer proyek, biasanya penting bahwa proyek-proyek klien dibangun dengan tool standar yang dapat dengan mudah dipahami dan dipelihara, dan yang paling penting, bahwa itu tidak mudah dalam perekrutan bakat yang datang dengan pengalaman dalam platform Anda. Bootstrap sangat cocok digunakan. Pure tampaknya cukup sederhana juga dapat menjadi titik awal yang baik.

Ringkasan Fitur Pure

Berikut adalah ringkasan dari manfaat dan fitur Pure.

  • Dapat dicustom, grid responsif
  • Menu built-in vertikal dan horisontal, termasuk menu drop-down
  • Button yang bekerja dengan elemen <a> dan <button>
  • Form alignment yang fleksibel
  • Style table umum
  • Bersih, tampilan minimalis yang dapat dengan mudah diperluas

Namun yang paling mengagumkan, Pure.css super kecil, hanya 4,5 KB minified+gzip. Berikut berapa banyak ruang komponen yang berbeda dari pure ambil di lingkungan produksi Anda:

module sizes

Pure juga diuji dengan baik dan berjalan di IE 8+, Firefox, Chrome, Safari, iOS 6-8, and Android 4.x.

Dan Anda masih dapat menggunakannya dengan unsur-unsur dari Bootstrap, menambahkannya dimana Anda perlukan. Kami akan menunjukan contoh dibawah ini:

Pure dibangun pada Normalize.css, yang menstandarisasikan kinerja framework ini di browser. Menormalkannya disediakan reset default CSS :

  • Mempertahankan default useful
  • Menormalkan style untuk berbagai elemen
  • Mengoreksi bug dan ketidaksesuaian browser umum
  • Meningkatkan kegunaan dengan perbaikan halus
  • Menjelaskan kode menggunakan komentar secara rinci

Memulai dengan Pure

Website Pure dibangun dengan framework, sehingga minimalis, kodenya berkembang dengan baik membuat sederhana untuk menavigasinya, mudah untuk menggunakan panduan. Berikut ini adalah contoh dari menu kiri Pure dalam action :

get started

Anda dapat menambahkan Pure ke halaman Anda melalui Yahoo CDN gratis. Cukup tambahkan elemen <link> berikut ke halaman <head> Anda, sebelum stylesheet proyek Anda:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

Untuk menginisialisasi lebar responsif dari website Anda, menetapkan tag meta untuk viewport untuk lebar perangkat Anda:

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

Layout

Pada halaman layoutnya, Pure menawarkan pengambilan sample yang bisa didownload misalnya halaman yang berbeda untuk kebutuhan aplikasi umum:

samples (1)

Anda dapat browsing dan download salah satunya yang Anda inginkan untuk bereksperimen dengan menambahkannya pada aplikasi Anda.

  • Blog
  • Email
  • Gallery photo
  • Landing page
  • Gallery harga
  • Responsif side menu
  • Responsif menu horizontal-to-vertikal
  • Responsif menu horizontal-to- Scrollable

Basis pure

Halaman dasar(basis) memberikan background singkat tentang dasar bawahnya framework Pure, terutama Normalize.css :

Normalize.css adalah file CSS kecil yang menyedikan konsistensi lintas browser yang lebih baik dalam styling default elemen HTML. Juga modern, HTML5-ready, alternatif untuk reset CSS tradisional

Anda juga dapat memuat Normalize secara terpisah menggunakan Yahoo CDN untuk penggunaan independen:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/base-min.css">

Dan ada fitur dasar kecil lainnya seperti class untuk memberitahu Pure untuk memuat gambar responsif dengan viewport :

<img class="pure-img" src="...">

Tapi sekarang, mari kita lihat beberapa contoh layout Pure yang disediakan.

Grid

Grid merupakan aspek utama dari layout website Pure membuatnya cukup sederhana. Berikut adalah contoh singkat dari empat kolom box Pure pada layar dekstop:

grid-100

Dan inilah cara memperkecil pada viewport tablet ukuran setengah :

grid-50

Dan terakhir, satu kolom pada smartphone:

grid-25

Pure grid terdiri dari dua jenis class: grid dan unit. Anak elemen dari div grid harus div unit. Konten Anda berjalan didalam satuan div. Class unit diberi nama untuk mewakili lebarnya. Misalnya, pure-u-1-4 memiliki lebar 25%.

Berikut kode untuk keempat responsif diatas :

<div class="grids-example">
    <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Lorem Ipsum</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
        </div>
    </div>
 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Dolor Sit Amet</h3>
            <p>
                Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
            </p>
        </div>
    </div>
 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Proident laborum</h3>
            <p>
                In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
            </p>
        </div>
    </div>
 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Praesent consectetur</h3>
            <p>
               Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
            </p>
        </div>
    </div>

Seperti yang Anda lihat diatas, <div class=”pure-g”> mewakili class grid luar. Kemudian <div class=”pure-u-1 pure-u-md-1-2 pure-u-lg-1-4″> menginstruksikan browser untuk menunjukan satu kolom untuk viewport minimum, setengah kolom untuk medium dan kolom keempat untuk lebih lebar lagi.

Anda dapat mempelajari lebih lanjut tentang grid Pure disini.

Form

multi-column

Pure memiliki dukungan untuk menyelaraskan field input dalam form dan untuk styling field khusus, seperti :

  • Form inline
  • Form stacked
  • Form dua kolom
  • Form multi kolom
  • Input grouped
  • Input required
  • Input disabled
  • Input readonly
  • Input rounded
  • Checkbox dan radio

Anda dapat melihat semuanya disini. Mari kita menjelajahi dua form kolom, Pure yang mengacu sebagai align form:

two-column

Dengan menggunakan class pure-form-aligned dengan pure-control-group(s), Pure memastikan bahwa setiap set field benar diposisinya seperti yang ditunjukan diatas.

<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="name" type="text" placeholder="Username">
        </div>
 
        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>
 
        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>
 
        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>
 
        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>
 
            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>

Ini adalah cara yang cukup sederhana untuk membangunnya sangat bermanfaat, baik meletakan form.

Table

Membuat pure build dan format table cukup mudah juga. Berikut ini adalah contoh dari table bergaris horisontal:

table striped

Anda dapat melihat kode table diatas hanya dengan menambahkan class baris pure-table-odd bergantioan melalui kode Anda untuk mengubah striping:

<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
 
    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
 
        <tr>
            <td>4</td>
            <td>Ford</td>
            <td>Focus</td>
            <td>2008</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>5</td>
            <td>Nissan</td>
            <td>Sentra</td>
            <td>2011</td>
        </tr>
 
        <tr>
            <td>6</td>
            <td>BMW</td>
            <td>M3</td>
            <td>2009</td>
        </tr>
 
        <tr class="pure-table-odd">
            <td>7</td>
            <td>Honda</td>
            <td>Civic</td>
            <td>2010</td>
        </tr>
 
        <tr>
            <td>8</td>
            <td>Kia</td>
            <td>Soul</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>

Ada sejumlah contoh table lainnya yang ditampilkan disini.

Menu

Menu di Pure juga mudah difasilitasi, termasuk :

  • Menu vertikal
  • Menu horizontal
  • Selected dan disabled item
  • Dropdown
  • Menu vertikal dengan Submenu
  • Scroll horizontal menu
  • Scroll vertikal menu
  • Responsif menu vertikal
  • Responsif menu Horizontal-Scrollable
  • Responsif menu Horizontal-to-Vertical

Lihat semua menu yang diilustrasikan disini. Berikut adalah bagaimana kode Anda jika ingin membuat Dropdown menu:

dropdown menu

Pada dasarnya, hanya pure-menu-horizontal, pure-menu-list dan pure-menu-item pure-menu-has-children pure-menu-allow-hover dan kemudian daftar anak item menu.

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
            </ul>
        </li>
    </ul>
</div>

Pure memberikan contoh JavaScript untuk menerapkan fitur aksesibilitas tambahan dalam menu Anda.

Info lebih lanjut

Pure website menyediakan beberapa panduan yang sangat baik untuk membangun framework:

Dan Anda dapat menjelajahi kombinasi potongan-potongan dari Pure dengan Bootstrap dan JavaScript. Jika Anda ingin memulai dengan Pure footprint kecil dan style minimalis, Anda masih dapat memanfaatkan berbagai fitur Bootstrap, hanya memuat apa yang Anda butuhkan.

Berikut ini adalah contoh modal dialog Bootstrap dalam Pure, yang dapat Anda lihat pada halaman ekstensi Pure ini:

bootstrap w pure

Semoga bermanfaat