Postingan

Cara mudah membuat slide menu dan navbar web menggunakan bantuan front-end framework materializecss

Gambar
Gambar navbar menggunakan materializecss Cara mudah untuk membuat slide menu dan navbar web salah satunya adalah dengan menggunakan bantuan front-end framework html, css maupun javascript. Yang akan saya gunakan kali ini adalah framework materializecss. Dengan cara ini membuat slide menu  dan navbar web bisa jadi sangat mudah karena tinggal menggunakan class-class dan sedikit javascript atau jquery yang sudah disediakan. Jadi tidak diperlukan pengetahuan yang mendalam tentang html, css maupun javascript. Baik, untuk memulai membuatnya ikuti cara di bawah ini. Gambar sidenav atau slide menu menggunakan materializecss Langkah-langkah membuat slide menu web dengan materializecss. Siapkan atau buat dokumen html5 kemudian hubungkan dengan cdn css dan javascript materializecss, tambahkan pula cdn ikon google dan cdn jquery.  <!DOCTYPE html> <html>   <head> <title>Slide menu dengan materializecss</title> ...

Aplikasi web server apache mysql dan php pada android yang lengkap untuk koding

Gambar
Tangkapan layar I <code> Web Server Mengerjakan kode program berbasis web bisa dilakukan di perangkat android. Mulai dari kode editor sampai aplikasi web server yang mendukung apache, mysql dan php bisa dijumapai di Play store. Aplikasi Android ini seperti layaknya LAMP, XAMPP, MAMP atau WAMP di desktop.  Karena banyak pilihan disana, bisa membuat Anda bingung mau install aplikasi yang mana. Ada yang gratis sepenuhnya ada yang trial dan ada yang gratis namun untuk fitur tertentu harus membayar. Tentu saja saya memilih yang gratis dan pilihan itu adalah I <code>  Web Server. Aplikasi ini membutuhkan aplikasi I <code> Go Code Editor agar bisa dijalankan. Kedua aplikasi tersebut gratis, namun untuk kode editornya ada fitur tertentu yang harus membayar. Namun dengan fitur gratisnya sudah cukup untuk melakukan koding. Kelebihan I <code> Web Server adalah : Mendukung server apache Mysql (Mariadb) Php 5 dan 7 Database manajemen s...

CV atau daftar riwayat hidup versi web dengan bootstrap 4 "Biru utama"

Gambar
Pada kesempatan ini, saya ingin membagikan CV atau daftar riwayat hidup berbentuk web secara gratis. CV ini dibuat melalui html dan css dengan menggunakan frontend framework bootstrap 4 saya beri nama "Biru utama", karena memang dari segi warna didominasi oleh warna biru. Desain dari CV tampil baik di layar desktop maupun mobile atau responsive. Untuk layar desktop terbagi dua kolom, kolom kiri berisi data singkat sedang kolom kanan terdiri dari uraian karir, pendidikan, keahlian dan kontak. Bagian kanan pada tampilan desktop bisa di scroll apabila panjang layar tak bisa menampung data pada CV. Pada tampilan mobile hanya ada satu kolom dari atas ke bawah. Berikut adalah tampilan CV di layar desktop maupun mobile vertikal atau horisontal. Tampilan pada layar desktop : Gambar CV "Biru Utama" tampil di layar desktop vertikal Gambar tampilan CV "Biru Utama" di layar desktop horisontal Tampilan pada layar mobile : Gamba...

Kode editor di android yang lengkap dan mudah digunakan

Gambar
Gambar kode editor I <code> Go Sudah diketahui oleh banyak orang apalagi jika Anda seorang programer atau hanya hobi belajar tentang pemograman bahwa menggunakan handphone berbasis sistem operasi android bisa digunakan untuk menulis program. Yang saya akan bahas adalah adanya kode editor atau aplikasi untuk mengedit kode di android yang lengkap. Lengkap yang dimaksud adalah mempunyai banyak fitur dan mendukung banyak bahasa pemograman. Dalam tulisan ini yang di bahas adalah "I <code> Go - Code Editor/IDE/Online Compiler". Kode editor ini gratis tetapi untuk mendapatkan fitur tertentu memang harus membayar. Tapi tenang saja untuk pemograman web menggunakan aplikasi versi gratis sudah sangat mumpuni. Selain banyak fitur aplikasi ini juga sudah terintegrasi dengan web server apache, mysql dan php. Agar bisa digunakan web servernya harus menginstall I <code> web server. Gambar salah satu fitur I <code> Go menu tool Berikut adalah beberap...

Membuat resume atau CV dengan bootstrap 4 bagian kontak dan footer

Gambar
Tiba di bagian akhir pembuatan CV menggunakan bootstrap 4, yaitu pembuatan bagian kontak dan footer. Untuk konsep desain bagian kontak sama dengan konsep desain bagian pendidikan. Kesamaannya adalah menggunakan class list-group dan list-group-horizontal. Lebih jelas bisa dilihat dari kode di bawah ini.   <div class="row mt-2 kontak mb-4">         <h2 class="ml-4 text-primary">           <i class="fas fa-inbox ml-2 mr-2"></i>Kontak         </h2>         <div class="col-md-12">           <ul class="list-group list-group-horizontal-md border-left-0 border-right-0">             <li class="list-group-item flex-fill border-left-0 border-right-0">               <p><i class="fas fa-mobile-alt ml-2 mr-2"></i>085-xxx-xxx-x...

Membuat resume atau CV dengan bootstrap 4 desain bagian keahlian

Gambar
Untuk membuat resume atau CV desain bagian keahlian dengan bootstrap 4, saya memanfaatkan class media dan progress-bar. Class media bisa digunakan untuk menaruh gambar atau ikon dan teks atau komponen lain seperti progress bar. Class media saya masukkan ke dalam class col agar lebar kolomnya menyesuaikan secara otomatis. Untuk lebih jelasnya berikut kode untuk bagian keahlian.  <div class="row keahlian mt-2 mb-3">         <div class="col-md-12">         <h2 class=" ml-3 text-primary">           <i class="fas fa-toolbox ml-2 mr-2"></i>Keahlian         </h2>         </div>         <div class="col">           <div class="media">             <p class="align-self-center text-center mr-3 mt-0 mb-0"><i class="fas fa-globe fa-2...

Membuat resume atau CV dengan bootstrap 4 bagian desain karir dan pendidikan

Gambar
Gambar tampilan desain karir dan pendidikan tampilan desktop. Untuk desain CV dengan bootstrap 4 bagian karir dan pendidikan akan ditempatkan pada class badan. Saya akan menggunakan class row serta class col-md-* untuk membuat baris dan kolom, masing-masing bagian menggunakan kelas tersebut. Untuk lebih jelasnya di bawah ini adalah kerangka kode html class badan yang akan berisi desain bagian karir, bagian pendidikan, bagian keahlian, bagian kontak serta bagian ornamen untuk memperindah halaman. <div class="container-fluid">   <div class="row karir">     <div class="col-md-12">     </div>   </div>   <div class="row">     <div class="col-md-12 mt-n4 mb-4 ornamendua">       <div class="bulkir">       </div>       <div class="garis">       </div>       <div class=...