Cara Buat ERB Profil Sederhana

Halo Sobat Sederhana, kali ini kita akan membahas tentang cara membuat ERB (Embedded Ruby) profil sederhana. Kenapa perlu membuat profil sederhana menggunakan ERB? Karena dengan menggunakan ERB, kita dapat membuat profil yang lebih dinamis dan mudah diupdate. Nah, tanpa berlama-lama lagi, yuk simak cara membuat ERB profil sederhana berikut ini.

1. Persiapan

Sebelum memulai pembuatan profil, pastikan kamu sudah memiliki

  1. Text editor, contohnya Visual Studio Code, Sublime Text, atau Atom.
  2. Instalasi Ruby di komputer kamu.
  3. Browser untuk melihat hasil.

Jika kamu sudah mempersiapkan ketiga hal tersebut, maka kita bisa mulai membuat profil.

2. Membuat Struktur HTML

Langkah pertama yang harus kita lakukan adalah membuat struktur HTML. Struktur HTML yang baik akan memudahkan kita dalam penulisan kode ERB. Berikut adalah contoh struktur HTML untuk profil sederhana.
 
   Nama & Profil
  
  
 
 
  
   

 Nama Lengkap
  
 

Struktur HTML tersebut akan menjadi kerangka dasar dari profil sederhana yang akan kita buat.

3. Menambahkan CSS

Setelah membuat struktur HTML, kita perlu menambahkan CSS untuk membuat profil sederhana kita lebih menarik dan enak dilihat. Berikut adalah contoh CSS untuk profil sederhana.
 body {
  background-color: #f2f2f2;
  font-family: ‘Arial’, sans-serif;
  font-size: 18px;
  line-height: 1.5;
 }
 header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 50px;
 }
 h1 {
  color: #fff;
  font-size: 40px;
  margin: 0;
 }

Pastikan kamu menyimpan CSS tersebut di dalam tag <head>.

4. Menambahkan Kode ERB

Selanjutnya kita perlu menambahkan kode ERB untuk membuat profil lebih dinamis. Kita dapat menambahkan variabel dalam kode ERB untuk mengganti teks yang statis dalam HTML.

TRENDING 🔥  Cara Membuat Bunker Sederhana untuk Sobat Sederhana

Berikut adalah contoh kode ERB untuk profil sederhana.
  

 <%= nama_lengkap %>
 

Pada contoh kode di atas, kita menambahkan variabel nama_lengkap yang nantinya akan diisi oleh teks dari pengguna profil. Kita dapat menambahkan variabel lain seperti alamat email, nomor telepon, atau link ke sosial media.

5. Menambahkan Interaksi Pengguna

Selain menampilkan informasi dalam profil, kita bisa menambahkan interaksi pengguna dalam profil sederhana kita. Kita bisa menambahkan form untuk pengguna mengisi informasi mereka, atau menambahkan tombol untuk menghubungi pengguna.

Berikut adalah contoh kode interaksi pengguna.

Hubungi Saya
   Nama Lengkap
 
  
   Email
 
  
   Pesan
 
  
   Kirim

Dalam contoh kode di atas, kita menambahkan dua interaksi pengguna. Pertama, kita menambahkan tombol untuk mengirim email ke pengguna dengan meng-klik tombol Hubungi Saya. Kedua, kita menambahkan form untuk pengguna mengisi informasi dan mengirimkannya ke server.

6. Menampilkan Hasil

Setelah kita menambahkan kode HTML, CSS, dan ERB, kita bisa melihat hasil profil sederhana kita di browser. Pastikan kamu menyimpan file HTML dengan ekstensi .erb agar server bisa memproses kode ERB.

FAQ

1. Apa itu ERB?

ERB adalah singkatan dari Embedded Ruby. ERB digunakan untuk memasukkan kode Ruby ke dalam teks atau markup HTML, sehingga membuat konten menjadi lebih dinamis.

2. Apa yang dibutuhkan untuk membuat profil menggunakan ERB?

Kamu memerlukan text editor, instalasi Ruby, dan browser untuk melihat hasil.

3. Apa manfaat membuat profil menggunakan ERB?

Dengan menggunakan ERB, kita dapat membuat profil yang lebih dinamis dan mudah diupdate.

4. Apa saja interaksi pengguna yang dapat ditambahkan dalam profil?

Kita bisa menambahkan form untuk pengguna mengisi informasi, atau menambahkan tombol untuk menghubungi pengguna.

5. Dimana saya bisa belajar lebih tentang ERB?

Kamu bisa belajar ERB di dokumentasi resmi Ruby on Rails atau di situs belajar online seperti Codecademy atau Udemy.

Semoga Bermanfaat dan sampai jumpa di artikel menarik lainnya!

Cara Buat ERB Profil Sederhana

Copyright 2024 Sederhana.co.id