Pengenalan Dasar Bootstrap untuk Pemula

Ingin cepat membuat jaringan?

Ingin kode HTML yang konsisten?

Ingin membuat tampilan web yang responsif dan bagus?

Gunakan bootloader!

Bootstrap saat ini merupakan framework paling populer dalam pengembangan Web.

Berkat Bootstrap, kita bisa membuat jaringan lebih cepat. Tidak perlu repot dengan kode CSS. Karena semuanya disediakan oleh Bootstrap.

Ayo mulai..

 

Apa itu Bootstrap?

Bootstrap adalah kerangka kerja CSS.

Hanya dengan cara ini?

Ya!

Jika Anda ingin lebih lama:

Bootstrap adalah kerangka kerja CSS sumber terbuka dan gratis. Jika sebelumnya Anda pernah membuat website yang tidak menggunakan framework CSS…

Anda harus memiliki pengalaman membuat kode CSS Anda sendiri dari awal.

Melelahkan sekali. .

Inilah sebabnya mengapa Bootstrap hadir untuk membantu kami.

Untuk pemahaman yang lebih baik, mari kita bahas sejarahnya terlebih dahulu:

 

Sejarah dan Versi Bootstrap

Bootstrap awalnya disebut cetak biru Twitter. Karena pertama kali dikembangkan di Twitter oleh Mark Otto dan Jacob Thornton.

Tujuan awalnya adalah untuk menjaga konsistensi alat internal Twitter. Namun, inkonsistensi tersebut membuat kode tersebut sulit untuk dipelihara (maintenance).

Mulai dari masalah:

Mark Otto dan sekelompok kecil pemrogram mulai merancang dan membuat alat internal yang disebut Cetak Biru Twitter.

Oh ya, Hacker Week adalah hackathon untuk tim pengembang Twitter.

Bootstrap 2 dan 3

Versi ini mendukung responsive web design, yaitu layout yang dapat disesuaikan dengan ukuran perangkat yang digunakan.

Selain itu, Bootstrap 3 dirilis pada 19 Agustus 2013. Metode mobile-first berarti tampilan di perangkat seluler diprioritaskan. Oleh karena itu, jika Anda menggunakan kelas bootstrap pada suatu elemen, kelas tersebut akan terlebih dahulu menggunakan kelas tersebut pada tampilan seluler.

Bootstrap 4

Pada 29 Oktober 2014, Bootstrap 4 dirilis, dan versi finalnya dirilis pada 18 Januari 2018. Versi final mengacu pada versi tanpa pengembangan lebih lanjut.

Beberapa perubahan dalam versi ini:

  • Penulisan ulang kode utama;
  • Gunakan Sass, bukan Less;
  • Menambahkan CSS kanonik;
  • Menghapus dukungan untuk IE8, IE9 dan iOS6;
  • Mendukung Kotak Fleksibel CSS
  • Dan banyak lagi (harap baca catatan rilis).

Bootstrap 5 Beta

Bootstrap 5 resmi merilis versi Alpha pada 16 Juni 2020. Versi Beta selanjutnya akan dirilis pada 7 Desember 2020.

Beberapa perubahan di Bootstrap 5:

  • Hapus jQuery;
  • Menulis ulang sistem grid;
  • Situs dokumentasi bootstrap dimigrasikan dari Jekyll ke Hugo;
  • Menghapus dukungan untuk IE10 dan IE11;
  • Menambahkan banyak ikon SVG;
  • Dan banyak lagi (harap baca catatan rilis).

Jadi versi mana yang akan kita pelajari dalam tutorial ini?

Pada tutorial kali ini kita akan mempelajari edisi ke-5, tentunya akan saya update ketika versi terbaru sudah keluar.

Oke lanjut sekarang..

Persiapan untuk Belajar Bootstrap

Sebelum Anda mulai belajar Bootstrap, Anda harus terlebih dahulu menyiapkan peralatan dan prasyaratnya.

Untuk prasyaratnya, Anda setidaknya harus memahami CSS dan Javascript.

mengapa?

Karena kita akan menggunakan kelas Bootstrap secara luas nanti, jika Anda tidak mengerti CSS, mungkin sulit untuk memahaminya.

Jadi untuk Javascript, Anda hanya dapat memahami dasar-dasarnya, karena tidak banyak digunakan dalam tutorial ini…kecuali beberapa komponen.

Jadi, kita memerlukan beberapa alat untuk mulai belajar Bootstrap:

 

  1. Teks Editor

Kami akan menggunakan editor teks untuk menulis kode. Selama Anda tahu cara menggunakannya, Anda dapat menggunakan editor teks apa pun.

Dalam tutorial ini, kita akan menggunakan editor teks Visual Studio Code atau VS Code.

  1. Web Browser

Kita akan menggunakan web browser untuk melihat hasil dari kode yang kita tulis. Anda juga dapat menggunakan browser web apa pun dengan bebas.

Tapi jangan pake IE.. soalnya udah lama hehe

Dalam tutorial ini, kita akan menggunakan Google Chrome dan Firefox di browser web.

  1. Bootstrap

Nah, untuk Bootstrap sendiri…

Kita bisa mendownloadnya menggunakan CDN atau package manager seperti NPM, atau mendownloadnya secara manual.

tenang..

Pada langkah selanjutnya, kita akan belajar bagaimana:

Gunakan Bootstrap dalam HTML

Seperti yang saya katakan sebelumnya…

.. Kita bisa menggunakan Bootstrap dengan banyak cara.

  1. Gunakan CDN;
  2. Unduhan manual;
  3. Unduh dengan manajer paket;

Mari kita coba satu per satu:

 

  1. Menggunakan Bootstrap dengan CDN

Cara ini termasuk cara yang paling mudah bagi pemula yang baru belajar Bootstrap.

Kita hanya perlu menyalin link CDN Bootstrap dan memasukkannya ke dalam kode HTML.

Oh ya, bagi yang belum tahu apa itu CDN:

CDN adalah singkatan dari Content Delivery Network, sejenis server di seluruh dunia, yang digunakan untuk mengirimkan konten dengan cepat dengan cara terbaik.

Baca Juga : rekomendasi laptop harga 7-8 jutaan

Gambar di sebelah kanan adalah server CDN.

Apakah kamu mengerti?

OK silahkan!

Buat folder baru bernama learn-bootstrap dan buka dengan VS Code.

Klik pada file dan pilih untuk membuka folder.

Sumber : https://warung-it.com/

Manfaat Inspect Element Bagi Web Developer

Inspect Element adalah fitur browser yang dirancang untuk menyederhanakan pengembangan web.

Manfaat Elemen Inspeksi untuk pengembang Web adalah sebagai berikut.

  1. Tempat Eksperimen CSS

Selain memiliki konsol Javascript, Anda dapat mengatakan bahwa Elemen Inspeksi memiliki konsol CSS. Ya, kita bisa bereksperimen dengan kode CSS di sana.

Karena ketika kita menulis kode CSS di Inspect Element, browser akan langsung mengeksekusinya. Selain itu, kami juga menyediakan fitur yang memudahkan penulisan CSS, seperti pelengkapan otomatis, pemilih warna, filter, kotak model visual, dll.

Kode CSS yang ditulis dalam Elemen Inspeksi bersifat sementara. Kita harus menyalinnya ke dalam kode CSS di editor teks untuk menyimpannya.

  1. Pengujian Web Responsif

Kami tidak perlu memiliki banyak perangkat untuk pengujian responsif.

  1. Mengukur Kecepatan Web

Kita dapat mengetahui berapa lama browser telah mengunduh halaman web, berapa kecepatan dan ukuran kapasitas halaman web? Silakan gunakan fungsi jaringan atau garis waktu untuk melakukan operasi ini.

  1. Debugging Javascript

Beberapa orang mengatakan bahwa belajar javascript itu sulit karena kita tidak tahu dimana kesalahannya. Terkadang, browser hanya menampilkan halaman kosong saat terjadi kesalahan.

Sebenarnya pendapat tersebut salah, karena kita bisa melihat pesan error javascript di console. Di mana konsolnya? Itu ada di Elemen Inspeksi. Silakan buka menu konsol.

  1. Alat untuk Audit Web

Kami perlu melakukan audit untuk meningkatkan kinerja web.

  1. Mengambil Screenshot dengan Mudah

Khusus di Firefox, kami menyediakan fitur untuk mengambil screenshot halaman web. Untuk melakukan ini, klik kanan pada elemen yang ingin Anda ambil tangkapan layarnya dan pilih Screenshot Node.

  1. Mengukur Performa Memori dan CPU

Semakin banyak tab yang kita buka di browser, semakin banyak memori yang dikonsumsi. Selain itu, script pada jaringan juga dapat membuat kerja CPU menjadi lebih sulit. Untuk melihat kinerja memori dan CPU saat membuka halaman web, buka menu garis waktu di Google Chrome. Di Firefox, buka kinerja.

Baca Juga : rekomendasi laptop harga 7-8 jutaan

Ini adalah 7 manfaat yang diberikan Inspect Element kepada pengembang web. Padahal, Inspect Element memiliki banyak manfaat yang belum kita ketahui.

Sumber : warung-it.com

Pengertian PHP, Fungsi dan Sintaks Dasarnya

Dalam pengembangan website, PHP merupakan salah satu bahasa pemrograman yang harus dipelajari. Pasalnya, bahasa pemrograman ini dapat membuat website menjadi dinamis.

Nah, dalam artikel ini, Anda akan belajar lebih banyak tentang PHP. Kita akan membahas sintaks dasar PHP melalui contoh. Selain itu, kita akan membahas hubungan antara PHP, MySQL dan Tutorial PHP.

Kamu pasti semakin penasaran dengan pembahasannya, kan? Sebelum itu, mari kita pahami dulu pengertian dan fungsi PHP.

Pengertian PHP

(PHP: Hypertext Preprocessor) adalah bahasa pemrograman skrip sisi server sumber terbuka.

PHP, sebagai bahasa pemrograman, mengeksekusi instruksi pemrograman pada saat run time. Tentu saja, hasil instruksi akan bervariasi sesuai dengan data yang diproses.

PHP adalah bahasa pemrograman sisi server, jadi skrip PHP akan diproses di sisi server. Jenis server yang biasa digunakan bersama dengan PHP antara lain Apache, Nginx, dan LiteSpeed.

Selain itu, PHP juga merupakan bahasa pemrograman open source. Pengguna dapat dengan bebas memodifikasi dan mengembangkan sesuai dengan kebutuhan mereka. Tentu saja, jika Anda memiliki kemampuan coding yang baik, bukan?

 Mengapa menggunakan PHP?

Saat ini, tidak kurang dari 78% situs web di dunia menggunakan bahasa pemrograman yang dibuat oleh Rasmus Lerdorf pada tahun 1995. Bahkan platform besar seperti Facebook menggunakannya.

Jadi apa yang membuat PHP begitu populer? Mengapa menggunakan PHP yang memiliki sejarah lebih dari 20 tahun? Berikut beberapa alasannya:

Mudah dipelajari-Dibandingkan dengan bahasa pemrograman populer lainnya, PHP lebih mudah dipelajari.

  • Materi pembelajaran yang melimpah: Era PHP yang “cukup tua” mengakibatkan banyaknya dokumen, panduan, dan komunitas aktif bertebaran di dunia maya. Oleh karena itu, jangan takut ketika menghadapi kesulitan.
  • PHP adalah open source: siapa saja dapat menggunakan PHP tanpa mengeluarkan uang sepeser pun.
  • Kecepatan tinggi: Dibandingkan dengan bahasa lain, PHP telah terbukti meningkatkan kecepatan pemuatan. Misalnya, dalam beberapa kasus, ini tiga kali lebih cepat daripada Python.
  • Beberapa pilihan database: PHP dapat digunakan untuk hampir semua jenis database. Dari MySQL ke database non-relasional seperti Redis.
  • Kompatibilitas HTML yang baik
  • Skrip PHP tidak akan mengganggu HTML sama sekali. Padahal, keduanya saling melengkapi.
  • Fleksibilitas tinggi: PHP dapat dikombinasikan dengan banyak bahasa pemrograman lainnya. Jadi Anda bisa menggunakannya sesuai kebutuhan.
  • Multi-platform: PHP dapat digunakan di berbagai sistem operasi. Mulai dari Windows, Linux hingga MacOS.
  • Selalu up to date-Sejak pertama kali muncul pada tahun 1995, versi PHP saat ini adalah 7.4.
  • Dukungan untuk layanan cloud
  • Siapa yang mengira bahwa meskipun PHP memiliki sejarah hampir dua dekade, dapat mendukung layanan cloud dan memiliki skalabilitas yang baik

Fungsi PHP

Secara umum, fungsi PHP digunakan untuk pengembangan situs web. Situs web statis yang baik, seperti situs berita, tidak memerlukan banyak fungsi. Atau website dinamis, seperti toko online, dengan berbagai fungsi pendukung.

Namun, penggunaan PHP tidak terbatas pada pengembangan situs web. Namun, karena tingkat fleksibilitasnya yang tinggi, PHP juga dapat digunakan untuk membuat aplikasi komputer.