AdityaDees

Adakalanya kita ingin mengetahui jumlah data atau elemen yang ada pada suatu array pada javascript. Oleh karena itu pada artikel kali ini saya akan memberikan tutorial tentang cara menghitung total array di javascript.

Menghitung jumlah array ini biasanya berhubungan dengan kebutuhan kita dalam memanipulasi data array seperti menampilkan data dari array, menambah array, menghapus array, dll. Jumlah elemen array adalah indeks terbesar ditambah 1 dari suatu elemen array, jika array tersebut bukan merupakaan array assosiatif. Untuk mengetahui jumlah elemen array anda dapat menggunakan fungi namaarray.lenght.

Baca juga Menggenal Array di Javacsript

untuk lebih jelasnya, saya akan memberikan contoh seperti dibawah ini : 

var buah = ['apel', 'jeruk', 'mangga', 'Duraian']

alert('Jumlah Array : '+buah.length);

Itulah cara menghitung jumlah array di javascript, semoga artikel ini bermanfaat. Terimakasih telah berkunjung dan sampai jumpa diartikel yang lainnya.

Pada saat kita meninputkan data kedalam database kita sering kali mendapatkan tanggal berformat Inggris, karena memang default dari databasenya tanggal yang bertipe Inggris. contoh saja pada fungsi date('Y-m-d') maka akan menampillkan tangal saat ini, contoh 2021-10-03. Meskipun format tanggal tersebut tidak akan mempengaruhi sistem yang akan buat, tetapi tentu akan sangat berpengaruh ketika kita membuat sebuah sistem laporan yang pastinya harus menggunakan format Indonesia karena sesuai Negara kita sendiri.

Baca juga Cara memasang jQuery di CodeIgniter

Pada tutorial kali ini saya akan memberikan tutorial tentang cara mengubah format tanggal default ke format tanggal Indonesia. Untuk lebih mudahnya dalam pemanggilan fungsi format tanggal Indonesia ini, saya akan masukan fungsi untuk merubah format tersebut kedalam Helper CodeIgniter yang nantinya akan kita panggil di Controller.

Pertama buat sebuah helper dengan script seperti dibawah, lalu simpan script tersebut di folder app/Helpers dan simpan dengan nama ConvertTgl.php.

<?php

namespace App\Helpers;

class ConvertTgl

{

    public function get_tgl($tgl)

    {

        $bulan = [

            1 =>   'Januari',

            'Februari',

            'Maret',

            'April',

            'Mei',

            'Juni',

            'Juli',

            'Agustus',

            'September',

            'Oktober',

            'November',

            'Desember'

        ];

        $pecah_tgl = explode('-', $tgl);

        $tgl_indo = $pecah_tgl[2] . ' ' . $bulan[(int)$pecah_tgl[1]] . ' ' . $pecah_tgl[0];

        return $tgl_indo;

    }

}

Setelah selesai membuat Helper kita akan panggil Helper ConvertTgl tersebut di controller. Disini kita buat Controller dengan nama TesConvertTgl.php

<?php

namespace App\Controllers;

use App\Helpers\ConvertTgl;

class TesConvertTgl extends BaseController

{

    protected $ConvertTgl;

    public function __construct()

    {

        $this->ConvertTgl = new ConvertTgl();

    }

    public function index()

    {

return $this->ConvertTgl->get_tgl(date('Y-m-d'));

    }

}

Maka output yang akan ditampilkan seperti di bawah ini :

10 Oktober 2021

Itulah tutorial tentang cara menampilkan format tanggal Indonesia di CodeIgniter 4, semoga artikel ini bermanfaat. Jika anda ada kesulitan dalam penulisan kode silahkan tinggalkan komentar, jangan sungkan. Terimakasih.

jQuery adalah sebuah library JavaScript yang diperuntukan untuk memudahkan dari segi pembuatan aplikasi. jQuery ini berisi kumpulan fungsi-fungsi JavaScript yang siap pakai.Sehingga memudahkan kita dalam penulisan kode JavaScript. jQuery ini gratis dan bersifat open source.. lebih lengkap tentang jquery.

Pada artikel kali ini, saya akan menjelaskan bagiamana cara memasang jQuery di Codeigniter. Terdapat 2 cara untuk memasang jQuery, yaitu secara offline dan secara online. Secara offline dengan mengunduh file jQuery terlebih dahulu dan secara online menggunakan CDN. 

Baca juga Membuat kalkulator dengan jQuery

Memamasang jQuery di CI secara oflline 

1. pertama, kunjungi halaman wb resmi jQuery disini https://jquery.com/download/.
2. Selanjutnya Anda dapat memilih jQuery versi compressed (lebih kecil) atau yang uncompressed (lebih besar). Pada kesempatan kali ini saya akan memilih versi uncompressed, karena kita hanya akan menkonsumi jQuery saja tidak akan mendevelop jQuery. Jika anda ingin mendevelop atau melakukan custom pada jQuery anda dapat menggunakan yang uncompressed, karena lebih mudah dibaca dan dikembangkan.
3. Seleksi semua kode dengan menekan CTRL+S.
4. Kemudian kita simpan dengan nama jquery.min.js.
5. Selanjutkan buatlah folder dengan nama assets di dalam folder root CI anda.
6. Didalam folder assets buat kembali forlder dengan nama js.
7. Selanjtunya pindahkan file jquery.min.js yang sudah di download tadi ke dalam folder root CI andda kemudian assets/js.
8. Untuk memasang jquery yang telah anda simpan, silahkan gunakan script berikut ini.

<script type="text/javascript" src="<?=base_url('assets/js/jquery.min.js'); ?>"></script>

Baca juga Membuat animasi loading page dengan jQuery

Memasang jQuery di CI secara online 

1. Pertama, kunjungi halaman CDN jQuery di https://code.jquery.com/.
2. Selanjutnya silahkan pilih versi jQuery sesuai kebutuhan anda. Pada artikel ini kali ini saya akan meengunakan versi uncompresssed kembali.
3. Selanjutnya klik tombol salin pada script yang diberikan.
4. Untuk memasangnya Silahkan tempel di template CI anda.   

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

Itulah cara memasang jquery di codeigniter. Lebih lanjut belajar jquery bisa disini. 

Pada artikel kali ini kita akan sama - sama membuat Animasi Loading ketika halaman dimuat menggunakan jquery dan sedikit css agar tampilan lebih menarik, Menunggu halaman selesai dimuat adalah suatu hal yang lumayan membosankan, apa lagi ketika akses jaringan internet yang digunakan sedang lambat, kontent / halaman website akan meload dengan waktu yang cukup lama, tidak jarang pengunjung website kita juga akan merasa tidak nyaman dan akhirnya meninggalkan website kita.

Baca juga Membuat kalkulator dengan jQuery

Agar sedikit mengobati rasa bosan pengujung ketika sedang load halaman website kita, mari kita coba untuk membuat animasi loading agar pengunjung web kita tidak bosan menunggu halaman web selesai di load. Bagaimana caranya ? mari kita simak artikel dibawah ini,

Pertama buat kontent HTML seperti dibawah :

<div class="preloader">

        <div class="loading">

            <img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" width="80">

            <p>Harap Tunggu</p>

        </div>

    </div>

    <h1>Halaman Berhasil di load</h1>

Setelah itu kita percantik page kita  dengan sedikit css.

<style type="text/css">

        .preloader {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: 9999;

            background-color: #fff;

        }

        .preloader .loading {

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

            font: 14px arial;

        }

    </style>

Kita tambahankan css ini bertujuan untuk membuat class preloader ini menjadi full page, dan ketika prealoader ini selesai dimuat maka kita akan hilangkan preload ini. Bagaimana caranya ? Yups, dengan bantuan jQuery.

Baca juga Membuat jam digital dengan jQuery

Mari kita buat script jQuery nya, dengan seperti dibawah ini

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <script>

        $(document).ready(function () {

            $(".preloader").fadeOut(1000);

        })

    </script>

Pertama kita load dulu library jquerynya, kemudian kita buat preloader ini menghilang ketika halaman web selesai di load dengan menggunan fungi built-in jQuery yaitu fadeOut. disini kita kasih parameter 1000 artinya melakukan fadeOut selama 1 detik.

Setelah selesai membuat scriptnya mari kita coba hasilnya. Jika berhasil maka kurang lebih akan menampilkan halaman seperti dibawah.

Ketika halaman selesai di load

Saya akan jelaskan sedikit prosesnya. Jika anda lihat ada class yang namanya preloader yang isinya adalah gambar loading dan tulisan "Harap Tunggu".Jadi untuk konsepnya ketika halaman web selesai diload maka preloader ini akan dihilangkan. Jadi yang tampil nanti hanya "Halaman Berhasil di load".

Baca juga Tutorial membuat input tanggal dengan jQuery datePicker

Kalo ingin script full nya bisa di bawah ini :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Membuat Page Loading</title>

    <style type="text/css">

        .preloader {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: 9999;

            background-color: #fff;

        }

        .preloader .loading {

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

            font: 14px arial;

        }

    </style>

</head>

<body>

    <div class="preloader">

        <div class="loading">

            <img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" width="80">

            <p>Harap Tunggu</p>

        </div>

    </div>

    <h1>Halaman Berhasil di load</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <script>

        $(document).ready(function () {

            $(".preloader").fadeOut(1000);

        })

    </script>

</body>

</html>

Baik itu dia cara membuat animasi loading ketika halaman sedang di load. Semoga artikel ini bermanfat dan sampai jumpa di artikel yang lainnya.

Ketika berbicara tentang kalkulator tentu semua kalangan dari Sekolah Dasar hingga kuliah sudah mengenal dan sudah mengethui apa yang dimaksud kalkulator. Kalkulator merupakan sebuah tool (alat) yang membantu kita untuk menghitung suatu angka, jadi kita tidak perlu lagi repot-repot untuk menghitung manual angkat, dengan kalkulator kita tinggal menginputkan angka lalu kita kita pilih operatornya tekan hasilnya maka setelah itu akan keluar hasilnya, Lantas bagaimana kita bisa membuatnya? oke jangan kemana-mana tetap simak terus ya artikel ini ya.

Kalkulator yang akan kita buat kali ini menggunakan library javascript yaitu jquery, karena itu disini saya membuat judul tentang membuat kalkulator sederhana dengan jQuery, jadi yang kita akan buat adalah ada dua buah inputan di mana inputan yang satu dan dua itu merupakan sebuah bilangan yang kita akan esekusi nanti, dan ada sebuah tag select dimana tag select ini nantinya berfungsi untuk memilih opsi operator yang akan dipakai baik itu penjumlahan, perkalian, dll.

Baca juga Tutorial Menampilkan Gambar Sebelum di Upload dengan jQuery

Berikut adalah contoh pembuatan kalkulator sederhananya

<!DOCTYPE html>

<html>

<head>

    <title>Membuat Kalkulator Sederhana dengan jQuery</title>

</head>

<body>

    <h1>Membuat Kalkulator Sederhana dengan jQuery</h1>

    <div class="container">

        <pre>

        <div class="muka">

            <input class="bilangan1" type="text"></input>

            <select class="operator">

                <option value="-">-</option>

                <option value="*">*</option>

                <option value="/">/</option>

                <option value="+">+</option>

                <option value="Modulus">Modulus</option>

            </select>

            <input class="bilangan2" type="text"></input>

            <br>

            <button id="hitung">Hitung</button>

        </div>

        <div class="demo"></div>

        </pre>

    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#hitung").click(function (e) {

                e.preventDefault()

                var bilangan1 = parseInt($(".bilangan1").val());

                var bilangan2 = parseInt($(".bilangan2").val());

                function cek() {

                    operator = $(".operator").val();

                    if (operator === "*") {

                        var hasil = (bilangan1 * bilangan2);

                    } else if (operator === "/") {

                        var hasil = (bilangan1 / bilangan2);

                    } else if (operator === "+") {

                        var hasil = (bilangan1 + bilangan2);

                    } else if (operator === "-") {

                        var hasil = (bilangan1 - bilangan2);

                    } else if (operator === "Modulus") {

                        var hasil = (bilangan1 % bilangan2);

                    }

                    return hasil;

                }

                console.log(cek())

                var output = $(".demo");

                output.html(` Hasil dari operator <strong> ( ${operator} ) </strong> adalah = <strong>  ${cek()}   </strong>`)

            })

        })

    </script>

</body>

</html>

Setelah anda selesai ngoding , maka akan menampilkan halaman Kalkulator seperti dibawah ini :

Silahkan tambahkan lagi apa yang kurang seperti persen ( % ), Factorial ( ! ), dll.

Baca juga Membuat jam digital otomatis dengan jQuery

Itulah cara membuat kalkulator sederhana dengan jQuery. Semoga Artikel ini bermanfaat dan sampai jumpa di artikel yang lainnya.

Kali ini saya akan memberikan tutorial tentang cara menampilkan gambar sebelum (Preview) di upload dengan menggunakan jQuery. Biasanya user atau pengguna ketika akan upload foto ingin terlebih dahulu dapat melihat foto yang diupload sehingga user tidak salah dalam pemilihan foto. Lantas bagaimana cara membuatnya ? Saat ini banyak sekali cara untuk membuat preview gambar pada sebelum melakukan upload foto, seperti pada tutorial kali ini yang akan saya bagikan menggunakan jQuery. Untuk mempersingkat waktu kita langsung saja ketutorialnya.

Baca juga Membuat Jam Digital dengan jQuery

Pertama kita buat file HTML seperti berikut 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Tutorial Preview Gambar</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

<body>

    <div class="container mt-3">

        <div class="row">

            <div class="col-md-4">

                <div class="card">

                    <div class="imgWrap">

                        <img src="logowandi.jpg" id="imgView" class="card-img-top img-fluid">

                    </div>

                    <div class="card-body">

                        <div class="custom-file">

                            <input type="file" id="inputFile" class="imgFile custom-file-input"

                                aria-describedby="inputGroupFileAddon01">

                            <label class="custom-file-label" for="inputFile">Choose file</label>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

Selanjutnya sisipkan code jquery dibawah ini , didalam tag <body>, paling bawah saja :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script>

        $("#inputFile").change(function (event) {

            fadeInAdd();

            getURL(this);

        });

        $("#inputFile").on('click', function (event) {

            fadeInAdd();

        });

        function getURL(input) {

            if (input.files && input.files[0]) {

                var reader = new FileReader();

                var filename = $("#inputFile").val();

                filename = filename.substring(filename.lastIndexOf('\\') + 1);

                reader.onload = function (e) {

                    debugger;

                    $('#imgView').attr('src', e.target.result);

                    $('#imgView').hide();

                    $('#imgView').fadeIn(500);

                    $('.custom-file-label').text(filename);

                }

                reader.readAsDataURL(input.files[0]);

            }

            $(".alert").removeClass("loadAnimate").hide();

        }

        function fadeInAdd() {

            fadeInAlert();

        }

        function fadeInAlert(text) {

            $(".alert").text(text).addClass("loadAnimate");

        }

    </script>

Maka akan menampilkan halaman seperti berikut :

Baca juga Membuat Web Scrapper dengan NodeJs

Jika anda ingin full script nya, adalah di bawah ini :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Tutorial Preview Gambar</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

</head>

<body>

    <div class="container mt-3">

        <div class="row">

            <div class="col-md-4">

                <div class="card">

                    <div class="imgWrap">

                        <img src="logowandi.jpg" id="imgView" class="card-img-top img-fluid">

                    </div>

                    <div class="card-body">

                        <div class="custom-file">

                            <input type="file" id="inputFile" class="imgFile custom-file-input"

                                aria-describedby="inputGroupFileAddon01">

                            <label class="custom-file-label" for="inputFile">Choose file</label>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script>

        $("#inputFile").change(function (event) {

            fadeInAdd();

            getURL(this);

        });

        $("#inputFile").on('click', function (event) {

            fadeInAdd();

        });

        function getURL(input) {

            if (input.files && input.files[0]) {

                var reader = new FileReader();

                var filename = $("#inputFile").val();

                filename = filename.substring(filename.lastIndexOf('\\') + 1);

                reader.onload = function (e) {

                    debugger;

                    $('#imgView').attr('src', e.target.result);

                    $('#imgView').hide();

                    $('#imgView').fadeIn(500);

                    $('.custom-file-label').text(filename);

                }

                reader.readAsDataURL(input.files[0]);

            }

            $(".alert").removeClass("loadAnimate").hide();

        }

        function fadeInAdd() {

            fadeInAlert();

        }

        function fadeInAlert(text) {

            $(".alert").text(text).addClass("loadAnimate");

        }

    </script>

</body>

</html>

Gmn mudah bukan ? semoga berhasil.

Baca juga Membuat Program Jadwal Sholat dengan data JSON dan PHP

Itulah  tutorial menampilkan gambar sebelum di upload pada web dengan jQuery, semoga artikel ini bisa bermanfaat. Sampai jumpa di artikel yang lainnya.