technotechno

Postingan

Menampilkan postingan dengan label html

Cara Membuat Menu Auto Fixed Ketika di Scroll | WEB

Auto Fixed disini biasanya banyak di terapkan pada web-website yang ingin memiliki tampilan atau design web yang lebih menarik. Jadi simpelnya ketika kita melakukan scroll ke bawah menu yang tadinya posisinya tetap akan berubah menjadi fixed di atas atau di bagian tertentu yang sudah di tentukan. Untuk membuat tampilan website anda seperti ini sangatlah mudah anda bisa memanfaatkan fitur javascript. Sebagai contoh disini kita akan membuatnya dengan tampilan html sederhana seperti berikut : Ketika anda melakukan aksi scroll maka tampilan akan menjadi seperti berikut : Kode cara Membuat Menu Auto Fixed Ketika di Scroll <!DOCTYPE html> <html> <head> <title>Coding Rakitan</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> body{ height: 2000px;margin: 0px;padding: 0px; }.bl{ height: 200px; } .menu{ height: 50px; background:...

Baca selengkapnya

Mengenal dan Menginstall XAMPP

XAMPP merupakan aplikasi atau perangkat lunak yang berfungsi sebagai server yang berdiri sendiri (localhost). Aplikasi ini bersifat open source yang dapat di install di berbagai platform seperti Windows, Linux, serta Mac OS. Nama XAMPP adalah singkatan dari X (sistem operasi), Apache, MySQL, PHP dan Pearl. Seperti namanya XAMPP memang terdiri dari beberapa aplikasi yang disatukan. Aplikasi ini akan sangat membantu pengembang web dalam membangung sebuah aplikasi Web. Kegunaan XAMPP Ada beberapa kegunaan XAMPP yang perlu diketahui oleh pemula. Berikut kegunaan XAMPP tersebut. Sebagai server Seperti yang sudah dikatakan diatas fungsi utama XAMPP adalah sebagai server, sebuah web dimana diserver tersebut di atur file-file yang akan di tampilkan pada halaman web. Penghubung ke Database Dalam membangun sebuah web database sangat diperlukan untuk menyimpan sebuah data. XAMPP berfungsi sebagai penghubung web dengan database yaitu database MYSQL. Membantu perancangan aplikasi web secara offli...

Baca selengkapnya

Cara Membuat Tampilan Login seperti Facebook

Kali ini kita akan membuat sebuah tampilan website sosial media yaitu facebook. Tampilan yang akan dibuat adalah tampilan pertama yang akan muncul ketika membuka facebook (tampilan login dan daftar). Dalam pembuatan kali ini bahasa pemrograman web yang digunakan adalah HTML, dan CSS. Tampilan akhirnya akan tampak seperti berikut : Berikut adalah kode dalam file utama "index.html" dan "css.css". index.html <!DOCTYPE html> <html> <head> <title>Cara Membuat Tampilan Login seperti Facebook</title> <link rel="stylesheet" type="text/css" href="asset/css/css.css"> <link id="favicon" rel="shortcut icon" type="image/png" href="asset/icon/icon.png"> </head> <body > <div class="atas"> <div class="bungkus"> <div class="kiri"> <h3>codingrakitan</h3> </div> <div class="k...

Baca selengkapnya

Membuat Tampilan Seperti WhatsApp Web dengan HTML dan CSS

WhatsApp merupakan salah satu aplikasi chat yang sngat populer di Indonesia. Selain bisa digunakan di Smartphone, WhatsApp juga dapat dinikmati via WEB. Alamat resminya adalah https://web.whatsapp.com/ . Pada postingan kali ini saya akan membagikan tutorial tentang cara membuat tampilan web seperti pada halaman WhatsApp Web. Disini saya hanya akan membuat tampilan saja, untuk web dengan aksinya akan saya ajarkan pada postingan selanjutnya. Hasilnya nanti akan tampak seperti gambar dibawah : Langsung saja dua code yang harus anda perhatikan adalah "index.html" dan "css.css" yang ada pada folder "asset/css/css.css". index.html <!DOCTYPE html> <html> <head> <title>Belajar Membuat QR Code</title> <link rel="stylesheet" type="text/css" href="asset/css/css.css"> <link id="favicon" rel="shortcut icon" type="image/png" href="asset/icon/icon.png"> ...

Baca selengkapnya

Cara Membuat Menu Seperti Facebook dengan CSS, Jquery, dan HTML

Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan Facebook, saya akan membagikan project yang telah saya buat di akhir postingan. Hasil tampilan nantinya akan nampak seperti gambar berikut. File utama yang harus anda perhatikan, ada pada file index.php dan css.css dalam folder "asset/css/". Untuk anda yang sudah terbiasa dengan dunia pemrograman web tentunya sudah paham dengan kode-kode yang akan saya bagikan. Bagi yag baru belajar silahkan dalami dulu tentang HTML dan juga CSS. Index.php <!DOCTYPE html> <html> <head> <title>Coding Rakitan</title> <link rel="stylesheet" type="text/css" href="asset/css/css.css"> <script type="text/javascript" src="asset/js/jq.js"></script> <script type="text/javascript" src="asset/js/js.js"></script> </head...

Baca selengkapnya

Cara Membuat Scroll Auto Load More Data dengan Menggunakan Php, dan Jquery

Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui bagaimana Scroll Auto Load ini anda bisa melihat contohnya seperti di bawah ini. Pada pembuatan tampilan seperti di atas kita hanya akan menggunakan data manual bukan dari database. Untuk membuat scroll auto load ini kita juga membutuhkan jquery, serta jquery inview yang dapat anda download melalui tautan di bawah. Jquery Jquery Invew Setelah selesai mendownload file di atas sekarang buatlah sebuah folder baru di localhost anda dan pastikan XAMP anda telah di aktifkan. Lanjut buat folder dengan nama disesuaikan dengan keinginan teman-teman saya sendiri memberi nama folder dengan "coba". Setelah itu buat direktori dengan susunan seperti berikut : Untuk file-file tambahan nantinya akan saya sertakan pada link download project di bawah. Yang perlu teman-teman ketahui disini adalah file "index.php", dan "data.php...

Baca selengkapnya