Ahmad Muhardian
Hi! 👋, Saya Dian. Founder Petani Kode dan Web Developer Expert. Suka belajar hal baru dan menulis.
Hi! 👋, Saya Dian. Founder Petani Kode dan Web Developer Expert. Suka belajar hal baru dan menulis.
Ada 469 artikel yang ditulis oleh Ahmad Muhardian
Tag Meta Viewport adalah tag HTML yang penting bagi Bootstrap untuk membuat halaman web menjadi responsif.
Saya berencana akan melakukan instal ulang dalam waktu dekat ini. Karena ada beberapa kerusakan yang saya temukan di Distro Linux yang sedang saya pakai. Sebelum melakukan itu, ada baiknya mencatat dulu konfigurasi server yang sedang berjalan. Supaya nanti mudah mengkonfigurasi lagi.
Template baawan blogger sudah saya modifikasi sedemikian rupa. Namun, masih ada yang kurang, pewarnaan kode (syntax highlighting). Kode yang saya sisipkan di dalam artikel tidak berwarna. Kadang saya memanfaatkan gist github, pastebin, ideone, dsb. untuk menyisipkan kode yang berwarna. Modul highlight.js berfungsi untuk membuat kode (di web) menjadi berwarna. Kode yang berwarna akan lebih mudah dibaca. Karena itu, kita perlu menggunakan highlight.js. Berikut ini cara menggunakan highlight.js di blogger. 1. Memasang higlight.jsKita akan memanfaatkan CDN (content delivery network) nutuk memasang highlight.js, karena blogger tidak menyediakan tempat untuk hosting file. Silakan masuk ke edit html template. Kemudian masukkan kode berikut ini ke dalam tag <head>: <!– Syntax highlighter –> <link href=’//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/github.min.css’ rel=‘stylesheet’/> <script src=’//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js’/> <script>hljs.initHighlightingOnLoad();</script> <!– end Syntax highlighter –>Versi higlight.js yang digunakan adalah versi 9.0.0. Bila ada versi yang lebih baru lagi, anda tinggal mengganti angka itu saja. Kemudian github.min.css adalah kode CSS tema yang digunakan. Anda bisa menggunakan tema lain. Daftar tema bisa dilihat di github. 2. Menggunakan higlight.jsCara menggunakan highlight.js sangat mudah. Kita hanya perlu mengapit kode dengan tag <pre> dan <code> yang diberikan atribut kelas dengan nilai sesuai dengan nama bahasa pemrogramannya. Contoh: Bahasa pemrograman Java <pre><code class=“java”> Class Contoh{ public static void main(String[] args){ System.out.println(“Hello World!”); } } </code></pre>Hasilnya: Class Contoh{ public static void main(String[] args){ System.out.println(“Hello World!”); } }Bahasa pemrograman C++ <pre><code class=“cpp”> #include <iostream> using namespace std; int main(){ cout << “Hello World!” << endl; return 0; } </code></pre>Hasilnya: #include <iostream> using namespace std; int main(){ cout << “Hello World!” << endl; return 0; }Bagaimana kalau kode bahasa pemrogramannya ada lebih dari satu? Misalnya html, css, javascript, dan PHP. Jawabannya tinggal memanggil nama kelas-kelasnya jadi satu, dipisah dengan spasi. Contoh <pre><code class="html css js php"> <html> <head> <style type=‘text/css’> .body{ background: #008080; color: white; } </style> <script type=‘text/javascript’> console.log(“javascript dijalankan”); </script> </head> <body> <?php echo “<h2>Hello World</h2”; ?> </body> </html> </code></pre>Untuk kode HTML, kita perlu meng-encode karater < (lebih kecil) menjadi <, > (lebih besar) menjadi >, dan spasi menjadi Hasilnya: <html> <head> <style type=‘text/css’> .body{ background: #008080; color: white; } </style> <script type=‘text/javascript’> console.log(“javascript dijalankan”); </script> </head> <body> <?php echo “<h2>Hello World</h2”; ?> </body> </html>Mudah bukan? selamat mencoba. Referensi: https://highlightjs.org/usage/
Sistem Grid adalah bagian terpenting yang harus dipahami pada Bootstrap. Apa itu sistem grid? Gimana cara menggunakan sistem grid. Mari kita pelajari!
Apa yang akan kita lakukan bila ingin menyuruh komputer mengerjakan perintah yang berulang-ulang? Misalkan kita ingin menyuruh komputer menampilkan teks Petani Kode sebanyak 5x. Maka kita bisa menyuruhnya seperti ini: System.out.println("Petani Kode"); System.out.println("Petani Kode"); System.out.println("Petani Kode"); System.out.println("Petani Kode"); System.out.println("Petani Kode"); Tapi… bagaimana kalau sebanyak 1000x, apa kita akan mampu mengetik kode sebanyak itu?
Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML
Memahami apa itu Tag, Elemen, dan Atribut. Serta perbedaannya.
Sebenarnya untuk memulai belajar pemrograman PHP, kita tidak butuh banyak alat. Cukup dengan 4 alat ini...
Beberapa minggu yang lalu, saya menemukan sebuah gambar animasi gif di facebook. Animasi penulisan kode yang disertai efek partikel bertaburan. Menarik, sepertinya akan menyenangkan menulis kode dengan efek ini. Tidak lama kemudian, saya menemukan modulnya untuk Atom. Efek ini awalnya hanya bisa dinikmati di Code in Dark Editor . Kemudian, seorang programmer bernama Joel Besada membuat replikasinya. Joel menulis sebuah modul untuk Atom, namanya activate-power-mode . Berikut ini cuplikannya: