Anda Front End Developer?, maksimalkan framework ini

Discussion in 'HTML & Website Design' started by Yandiahmadgandasaputra, Oct 10, 2020.

  1. Yandiahmadgandasaputra

    Yandiahmadgandasaputra Member

    Joined:
    Aug 4, 2020
    Messages:
    112
    Likes Received:
    9
    Trophy Points:
    18
    Jika anda seorang developer website mungkin tidak asing lagi dengan yang namanya framework dan pastinya bukanlah hal yang baru bagi anda. Framework ini merupakan kumpulan dari script koding yang telah tersusun rapih sesuai dengan fungsinya masing-masing. Dengan adanya framework, developer menjadi lebih mudah dan terbantu ketika ingin membuat halaman website. Waktu pengerjaan menjadi semakin lebih efisien dan maksimal. Framework bootstrap adalah implementasi dari semua itu. Lalu apa framework bootstrap ini ?.

    Pengertian Bootstrap
    Bootstrap merupakan sebuah framework yang bersifat open source dimana lebih dominan digunakan dari sisi front end atau interface user. Framework ini dibangun oleh Jacob Thornton dan juga Mark Otto dengan tujuan untuk mempercepat pembuatan design halaman web. Namun nyatanya dari sisi back-end pun ada yang menggunakannya sebagai pelengkap.

    Framework bootstrap ini di dalamnya terdiri dari berbagai source code HTML dan juga CSS dimana di dalamnya memuat komponen dan fungsi dasar hingga advanced. Baik itu menu navigasi, button, background, form dan sebagainya.

    Fungsi Bootstrap
    Penggunaan bootstrap ini memberikan dampak yang positif bagi para web developer utamanya dari sisi front end. Dengan adanya framework bootstrap ini para web developer seperti diberikan tools tambahan untuk membangun website tidak hanya rapih dari sisi interface user saja tapi juga bisa membangun struktur koding yang teratur. Dan tentunya kedepan jika ada pengembangan dari halaman website yang menggunakan framework bootstrap ini akan lebih mudah untuk penambahan modul karena sudah tersusun dengan rapih. Adapun point-point yang menggambarkan fungsi umum dari framework bootstrap ini yaitu sebagai berikut :

    • Menghemat waktu proses pembuatan halaman website terutama dari sisi front end.
    • Interface user yang lebih modern dan enak dipandang.
    • Halaman website lebih ringan terutama saat loading halamannya.
    • Halaman website yang responsive mobile.
    Komponen utama bootstrap
    Framework bootstrap ini berupa sekumpulan script atau source code yang dapat menjalankan berbagai fungsi dimana di dalamnya terdapat modul-modul tertentu yang berpedoman dengan kerangka website pada umumnya. Adapun komponen utama dari bootstrap sendiri yaitu sebagai berikut :

    • Bootstrap.js (bootstrap extensi javascript)
    File ini merupakan bagian modul yang menangani aktifitas interaksi dari sebuah halaman website. Dari mulai entry data, aktifitas registrasi dan lain sebagainya. Namun script tersebut cukup banyak sekali jika harus dibuat satu per satu. Jika halaman website sederhana dan hanya berisi source code javascript yang sedikit tidak jadi masalah. Namun jika banyak itu yang jadi persoalan. Namun disini ada sebuah library javascript yang dapat mengatasi hal tersebut. Itulah yang disebut dengan jQuery.

    JQuery ini merupakan sebuah library javascript yang digunakan untuk menghemat waktu pengerjaan dan pembuatan script. Dimana dalam hal ini programmer tidak perlu melakukan pengetikan berulang. Library jQuery ini bersifat open source dimana setiap pengembang meskipun sudah ada source code javascript dari sebuah halaman website masih bisa memodifikasinya. Website menjadi lebih dinamis dan user friendly. Selain itu juga, JQuery ini merupakan library javascript yang populer di kalangan programmer. Dengan fiturnya yang mudah serta dapat dimodifikasi oleh beberapa pengembang pertama ke pengembang berikutnya menjadikan ini digemari oleh para programmer.

    • Bootstrap.css (Bootstrap extensi css)
    Bootstrap.css ini merupakan bagian framework yang bertugas untuk mengatur layout dari halaman website yang dibuat. Selain itu juga ada HTML yang berperan beriringan dengan css ini. HTML fokus pada bagian konten dan struktur halaman website sedangkan css pada bagian layoutnya secara keseluruhan. Seperti warna dasar website, background, ukuran huruf dan juga jenis hurufnya, bentuk form atau tabel dan sebagainya. Antara HTML, CSS dan library javascript (jQuery) ini diperlukan agar halaman website ini responsif, elegan dan tidak datar begitu saja.
    • Glyphicons
    Glyphicons merupakan icon-icon yang terdapat di dalam bootstrap dimana bisa kalian gunakan untuk mempercantik tampilan website seperti huruf, push button, form entry data, navigasi dan sebagainya. Untuk menggunakan glyphicons ini cukup mudah. Anda tinggal download terlebih dahulu di framework bootstrap atau bisa ambil per source code untuk ditempelkan di website yang sedang anda buat. Berikut contoh script dari glyphicons yang bisa anda gunakan.
     
    Last edited: Oct 12, 2020
  2. seosakti

    seosakti New Member

    Joined:
    Feb 6, 2018
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    1
    Kalau dipasang ke template blogspot gimana caranya ya?
     
  3. Yandiahmadgandasaputra

    Yandiahmadgandasaputra Member

    Joined:
    Aug 4, 2020
    Messages:
    112
    Likes Received:
    9
    Trophy Points:
    18
    Nice, pertanyaan yang bagus @seosakti ...Caranya bisa melalui tahapan berikut ya :

    1. Login ke dashboard akun blogger.
    2. Masuk di editor template atau edit HTML.
    3. Tempelkan kode berikut tepat di atas script kode </head>.
    Code:
     
         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
    


    4. Di kedua link tersebut terdapat angka 3.3.1, nah itu merupakan versi bootstrap yang digunakan ya. Jika ingin versi terupdate-nya bisa disesuaikan sendiri.
    5. Kemudian tempelkan lagi kode berikut tepat di atas script kode </body>.
    Code:
     
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    
    

    6. Lalu Simpan.

    Nah bootstrap dengan versi 3.3.1 telah terpasang di blog-nya mas. Silahkan dicoba ya. Terimakasih ;).
     
    Last edited by a moderator: Oct 23, 2020
  4. arissaputro

    arissaputro Member

    Joined:
    Sep 27, 2020
    Messages:
    42
    Likes Received:
    2
    Trophy Points:
    8
    mas @Yandiahmadgandasaputra bisa diterapkan juga tidak ke wordpress.org dan kalau bisa apa kode scriptnya sama kayak di blogspot????
     
  5. Yandiahmadgandasaputra

    Yandiahmadgandasaputra Member

    Joined:
    Aug 4, 2020
    Messages:
    112
    Likes Received:
    9
    Trophy Points:
    18
    Bisa mas @arissaputro ...hanya scriptnya memang berbeda..untuk tahapannya juga lebih banyak. Karena cukup banyak scriptnya, ini gambaran fungsi-fungsi yang bisa digunakan mas mungkin bisa dicoba dan cari tahu lebih detail :

    1. fungsi wp_enqueue_style()
    2. wp_enqueue_script()
    3. get_template_directory_uri()


    Terimakasih.:)
     
  6. noer98

    noer98 Member

    Joined:
    Feb 4, 2014
    Messages:
    608
    Likes Received:
    54
    Trophy Points:
    28
    Google+:
    terima kasih infonya, beberapa kali pakai buat framework CI
     
  7. Arif Rachman Hakim

    Arif Rachman Hakim Member

    Joined:
    May 4, 2014
    Messages:
    391
    Likes Received:
    29
    Trophy Points:
    28
    Google+:
    sekarang ini jamanya apa-apa framework ya kang apalagi untuk yang tujuannya bisnis, pakai framework memang lebih cepat, dan secara hasil bagus. sangat efisien yang dibutuhkan dunia kerja/industri
     
  8. graficurl

    graficurl Member

    Joined:
    Mar 9, 2017
    Messages:
    90
    Likes Received:
    2
    Trophy Points:
    8
    Kerja dengan framework hasilnya lebih cepat dan rapi..,
     
  9. Blackboo

    Blackboo New Member

    Joined:
    Dec 6, 2018
    Messages:
    67
    Likes Received:
    0
    Trophy Points:
    6
    Salah satu andalan nih, Nice info Bro
     
Loading...

Share This Page