Tutorial PHP - Membuat Form Input Color Picker Sederhana

Artikel kali ini akan singkat saja dikarenakan kesibukan saya yang luar biasa padat. Kali ini saya akan menjelaskan bagaimana cara membuat form input Color Picker yang berguna untuk memilih warna sebagai inputan. Tutorial yang saya jelaskan ini susah menggunakan bootstrap sebagai tampilannya jadi sudah mendukung tampian responsif.

#LINK DOWNLOAD

Anda dapat mendownload source plugin yang diperlukan pada link berikut https://farbelous.io/bootstrap-colorpicker/v2/. Sebagai informasi saya menggunakan versi 2 dikarenakan bootstrap yang saya gunakan masih bootstrap 3. Sesuai dengan dokumentasinya, untuk bootstrap colorpicker versi 3 hanya dapat digunakan jika anda sudah menggunakan bootstrap 4.

#CARA PENGGUNAAN

Setelah selesai melakukan download, silahkan mengekstrak file tersebut. File-file yang diperlukan terletak pada direktori dist. Jadi copy direktori dist pada program yang anda buat.

Berikut ini saya berikan contoh cara penggunaan sederhana dari plugin bootstrap color picker tersebut secara lengkap :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Color Picker</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="dist/js/bootstrap-colorpicker.js"></script>
</head>
<body>
    <br/>
    <div class="container">
        <div class="row">
            <div class="col-xs-4">
                <input id="cp1" type="text" class="form-control" value="#5367ce" />
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-xs-4">
                <div id="cp2" class="input-group colorpicker-component">
                    <input type="text" value="#00AABB" class="form-control" />
                    <span class="input-group-addon"><i></i></span>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function() {
            $('#cp1').colorpicker();
        });

        $(function() {
            $('#cp2').colorpicker();
        });
    </script>    
</body>
</html>

Yang perlu anda lakukan adalah melakukan include file css dan js dari bootstrap dan juga file css dan js dari bootstrap colorpicker itu sendiri.

Dalam contoh di atas saya memberikan 2 macam cara penggunaan. Untuk form inputan yang pertama adalah contoh basic dimana tampilannya hanya berupa input text biasa. Sedangkan untuk contoh kedua akan muncul kotak kecil di sebelah kanan yang menunjukkan informasi warna yang dipilih. Contoh tampilannya untuk lebih jelasnya akan seperti gambar berikut ini

Setelah menyiapkan tampilan form inputnya gunakan script .colorpicker() untuk mengubah form input tersebut menjadi form input color picker.

Untuk cara penggunaan yang lebih kompleks dapat anda baca terlebih dahulu pada link yang telah saya sertakan sebelumnya. Saya akan berusaha untuk memberikan tutorial penggunaan yang lebih lengkap pada artikel selanjutnya. Sekian saja penjelasan tutorial singkat saya pada artikel Tutorial PHP - Membuat Form Input Color Picker Sederhana. Semoga artikel ini bermanfaat dan selamat mencoba.

html php programming