Membuat Dashboard Data Center dengan Menu Ikon Responsif

 

    Artikel ini akan membahas cara membuat halaman dashboard untuk pusat data yang memiliki tampilan modern, responsif, dan dilengkapi dengan ikon-ikon yang mudah diakses. Dashboard ini menggunakan HTML dan CSS dengan bantuan Flexbox dan Grid untuk menyusun tampilan, serta efek animasi agar terlihat dinamis.

Langkah-Langkah:

Pengaturan Dasar Halaman HTML

Pada awal halaman, kita menetapkan judul halaman sebagai Dashboard Data Center. Judul ini juga diikuti dengan favicon yang disisipkan melalui tautan ke file gambar .ico.

 

Desain Latar Belakang dan Layout Utama

Untuk memberikan kesan profesional dan modern, latar belakang halaman menggunakan gambar yang diambil dari tautan eksternal. Kami menggunakan properti CSS background-image, background-size, dan background-repeat untuk memastikan gambar menutupi seluruh halaman tanpa pengulangan.

 

Pengaturan Kontainer Menu dengan Grid Layout

Bagian inti dari halaman ini adalah menu yang terdiri dari ikon-ikon berbentuk persegi dengan gambar dan teks di bawahnya. Kami menggunakan CSS Grid untuk menyusun menu menjadi 8 kolom dengan jarak antar item sebesar 40px.

 Setiap menu diatur agar berbentuk kotak dengan ukuran 130x130px, serta diberi bayangan dan efek hover agar tampilannya menarik ketika pengguna mengarahkan kursor ke ikon. Menu juga diberikan animasi masuk dari atas dengan menggunakan @keyframes.

 

Menyusun Menu dan Tautan

Setiap item menu dihubungkan dengan URL tertentu menggunakan elemen <a> yang dibungkus dalam kelas menu-item. Gambar ikon untuk menu diambil dari tautan gambar eksternal, dan setiap ikon diikuti dengan teks deskriptif di bawahnya.

 

Animasi dan Efek Hover

Untuk memberikan pengalaman yang lebih interaktif, ketika pengguna mengarahkan kursor ke ikon menu, item tersebut akan diperbesar sedikit menggunakan properti transform: scale(1.1);. Efek ini membuat tampilan dashboard terasa lebih responsif dan dinamis.

Untuk Mencoba dan Download Kode DISINI!!

Kesimpulan

Halaman dashboard ini menawarkan tampilan modern dan fungsional dengan penggunaan CSS Grid dan Flexbox. Desainnya responsif, ramah pengguna, serta dilengkapi animasi dan efek hover untuk pengalaman visual yang lebih menarik. Dashboard ini sangat cocok untuk aplikasi pusat data atau sistem manajemen informasi berbasis web.

 

Cara Membuat Halaman Login Tanpa Menggunakan Database dengan Gaya Modern dan Responsif

    

 Membuat halaman login sederhana tanpa menggunakan database sering kali digunakan untuk proyek kecil atau demo yang tidak memerlukan autentikasi pengguna yang kompleks. Dalam artikel ini, kita akan membuat halaman login sederhana yang memeriksa kredensial (username dan password) menggunakan hardcoded value dalam kode PHP. Halaman ini juga didesain dengan tampilan modern dan responsif menggunakan framework CSS Bootstrap.

Berikut kode untuk (login.php) 

 

Penjelasan Kode:

1. HTML & Bootstrap: Kode ini menggunakan Bootstrap untuk membuat tampilan login yang responsif dan modern. Form login memiliki dua input untuk username dan password, serta tombol login.

2. PHP Login Logic:

   • Setelah form dikirim dengan metode POST, PHP akan memeriksa apakah username dan password yang dimasukkan sesuai dengan kredensial yang disimpan secara hardcoded.
   • Jika username dan password sesuai, maka pesan sukses akan ditampilkan. Jika tidak, pesan kesalahan akan muncul.

3. Penggunaan di Lingkungan Nyata: Halaman login ini adalah contoh sederhana tanpa menggunakan database. Untuk aplikasi nyata, lebih baik menggunakan metode yang aman seperti hashing password dan penyimpanan kredensial di database.

   
   

Catatan: username : admin   ,  Password : admin123  

Link Pengujian dan Download DISINI!!

 

Kesimpulan

Halaman login sederhana tanpa menggunakan database ini adalah solusi cepat dan praktis untuk kebutuhan demo atau proyek kecil. Desain yang responsif dan modern dibuat mudah dengan penggunaan Bootstrap, sementara validasi login yang simpel dilakukan menggunakan PHP. Pastikan untuk tidak menggunakan metode ini di lingkungan produksi tanpa memperhatikan aspek keamanan lebih lanjut.

 

Membuat Halaman Web Sederhana dengan HTML, CSS dan JavaScript

    Jika anda baru memulai belajar pemrograman web, membuat halaman sederhana yang menampilkan “Hello World” adalah langkah pertama yang tepat. Pada artikel ini akan membantu Anda memahami langkah dasar dalam membuat halaman web sederhana menggunakan HTML, CSS dan JavaScript.

   1. HTML: Struktur Dasar Halaman Web

HTML (Hyper Text Markup Language) adalah bahasa markup yang digunakan untuk membuat steruktur dasar dari sebuah halaman web. Berikut adalah kode HTML sederhana untuk menampilkan kata “Hello World”:

Penjelasan Kode:

• <!DOCTYPE html> : Menyatakan bahwa ini adalah dokument HTML5,

• <html lang=”id”> : menandakan bahwa bahasa dokumen ini adalahIndonesia,

• <meta charset=”UTF-8”> : Mengatur karakter encoding menjadi UTF-8,

• <meta name=”viewport” conten=”width, initial-scale=1.0”> : Menyesuaikan tampilan agar sesuai dengan ukuran layar perangkat (Responsive),

• <title>Hello World”</title> : Menampilkan judul pada tab browser;

• <h1>Hello World</h1> : Tag h1 digunakan untuk menampilkan teks “Hello World” sebagai heading.

  2. Menambahkan CSS : Styling Halaman

  

  CSS (Cascading Style Sheets) digunakan untuk memberikan gaya pada elemen HTML.

  Berikut adalah contoh sederhana untuk mengatur tampilan teks “Hello World” menggunakan CSS: 

  
  
   

  Penjelasan Kode :

• body {background-color: #fofofo;} : memberikan warna latar belakang pada halaman,

• text-align: center; : Menyelaraskan teks ke tengah secara horizontal,

• margin-top: 100px; : Memberikan jarak dari atas halaman ke teks “Hello World”,

• h1 {color: #333;} : Mengubah warna teks menjadi abu-abu gelap.

     3. Menambahkan JavaScript : Interaksi Dinamis

 

JavaScript dapat digunakan untuk menambah interaksi dinamis pada hamalan web.

Contoh sederhana adalah menampilkan pesan alert saat haaman dimuat.

Penjelasan Kode:

• <script> : Digunakan untuk menyisipkan JavaScript ke dalam halaman HTML,

• fucntion sayHello() {…} : Fungsi JavaScript yang menampilkan pesan ketika halaman dibuka,

• onload=”sayHello()”: Memanggil fungsi sayHello() saat halaman selesai dimuat.

Kesimpulan

Membuat halaman web sederhana yang menampilkan Hello World adalah langkah awal yang sangat penting dalam belajar pemrograman web. Dengan menggunakan HTML, CSS dan JavaScript anda dapat membuat halaman interaktif dan berpenampilan menarik.

Downloads File disini !!! 

Selamat mencoba dan terus eksplorasi dunia web development!!