zonakode.com: Bootstrap

Showing posts with label Bootstrap. Show all posts

Sunday, 19 August 2018

Cara menggunakan Media Query/screen untuk membuat WEBSITE RESPONSIF

14:11:00 – by programmer 0

Link Source Code : Download Now

Sunday, 7 August 2016

Cara membuat validasi email

18:55:00 – by Unknown 0

Assalamualaikum wr wb,
Hay jumpa lagi dengan zonakode temukan tutorial hanya di zonakode.bg.com, Kali ini saya akan membahas tentang bagaimana cara membuat validasi email. yang sering kita gunakan ketika login atau membuat from saran dll, bisa di terapkan di mana saja.
asalkan kreatif ya.. sebelum membahas tentang validasi kita memahami tentang javascript ya walaupun sedikit yang penting kita sudah tau dasar dasar javascript itu sendiri.

oke langkah pertama kita membuat javascriptnya dulu, kalau temen temen bingung bisa liat videonya disini .
dan saya menggunakan aplikasi Atom.exe download di google.com banyak.

ini kodenya :

<html>
    <head>
        <title>Validasi</title>
        <script type="text/javascript">
        function Validasi(){
          //PEngambilan data darri from eko -> name=masing-masing 1
                var email=document.eko.email.value;
                var nama=document.eko.nama.value;
                var pass=document.eko.pass.value;
                //sampe ini 1
                //validasi from yang kosong tidak boleh ada yang kosong
                if (email=="" || nama=="" || pass==""){
                  alert("Form Harus Lengkap");
                }
                //validasi email menentukan benar salahnya email
                if ((email.indexOf('@',0)==-1) || (email.indexOf('.',0)==-1)){
                  alert("Email Salah");
            }

return true;
          }
        </script>
        
    <style media="screen">
    *{
      padding: 40,40,40,40;
      margin: 0;
    }
      #main{
        width: auto;
        height: auto;;
        background-color: #747809;
        float: left;
      }
    </style>
    </head>
    <body>
      <center>
        
      <div id="main">
        <form action="" name="eko" method="post" onsubmit="return Validasi();">
            <table align="center">
<tr>
                <td>From CONTOh</td>
              </tr>
<tr>
                <td>Nama </td>
                <td><input type="text" name="nama" placeholder="Nama"></td>
              </tr>
<tr>
                    <td>Email </td>
                    <td><input type="text" name="email" placeholder="Masukan email"></td>
                </tr>
<tr>
                  <td>Password</td>
                  <td>
                    <input type="password" name="pass" placeholder="Masukan Password">
                  </td>
                </tr>
<tr>
                    <td><input type="submit" name="submit" value="Kirim"></td>
                </tr>
</table>
</form>
</div>
</center>
</body>
</html>

tampilanya standar yang penting di validasinya:

penjelasan sudah saya letakkan di dalam kode tersebut , sebagai proggramer kita harus think smart,
jika salah akan ada alert seperti di bawah ini :

jika benar akan diam karena di form actionnya saya kosongi supaya anda bisa berkreasi sendiri sesuai selera ,, terimakasih.

Wassalamualaikum wr wb

Wednesday, 8 June 2016

Design Web Menggunakan Layoutit

20:26:00 – by programmer 0

Cara membuat layout dengan layoutit

assalamualaikum w w w
Alhamdulilah masih kuat puasanya .. oke langsung aja setelah artikel sebelumnya membahas tentang bagaimana cara mendesign layout dengan pengindo.
sekarang cara mendesign dengan www.layoutit.com

berikut vidionya : nice jangan lupa subscribe

nah begitu guys caranya.. silahkan di kreasikan sendiri.. dan tetap semangat buat buildweb nya

oke sekian dulu dari saya
wassalamualaikum w w w.

Monday, 6 June 2016

Membuat Layout Dengan Pengindo

21:10:00 – by programmer 0

Assalamualaikum w w w

Masih sehat kan setelah berpuasa seharian hehe puasa pertama sukses semua kan, semoga sukses guys..
oke kali ini saya akan membahas tentang WEB nah sebelum memualai seperti biasa saya akan menjelaskan tentang web.
Ahh Pasti sudah tau semua kan Web?? Gaktau Katrok lu :D,
Web atau website adalah suatu halaman (site) yang saling terhubung a tara satu dengan yang lainya, yang berisikan informasi informasi
yang diisi oleh pembuatnya sendiri. nah begitu website namanya, Pertanyaanya adalah gimana caranya kita membuat website ? nahh penasaran kan caranya :D sabar artikel selanjutnya dan selanjutnya kita membuatnya tapi secara urut dari awal hingga akhir makanya ikuti terus hanya di WWW.ZONAKODE.BLOGSPOT.COM ... kali ini saya akan MEMBUAT LAYOUT DENGAN PENGINDO. Pengindo adalah sofware gratisan untuk membuat web dengan base Bootstrap, Ah kayaknya kali ini kurang menantang karena kita akan di manjakan dengan drag and drob huhuhu, kita hampir gak mikir :D tapi logika harus tetap jalan ya :D..

Sebelumnya Download dulu Softwarenya yang terbaru ya.
Pengindo : DOWNLOAD
Software : Free (Online)
Base : Bootstrap

Atau

Design Online
Layoutit : MAMPIR SINI
Software : Online
Base : Bootstrap
CARANYA : Liat Disini Untuk LayoutIT

Jika sudah Mari pulang :D... Mari ke tahap design guys nanti bedakan ya Gampangan Mana (y)

Step 1 :

1. Buka Aplikasinya ohya pertama hidupin dulu koneksinya ketika mau masuk. setelah masuk matiin koneksi gak papa tapi kalau mau save hidupin lagi gays :D . karena disini memerlukan koneksi.
muncul kaya gambar berikut :

2. Klik aja "Klik here to create a new page..."
3. Nah disitu ada 2 plihan "Default empity Page" dan "Landing Page". terserah mau pilih yang mana. kalau saya pilih yang empity biar greget :D

4. Nah akan ada lembaran baru :D

Step 2 : Membuat Layout atau bagian bagian tertentu sesuai kita.

1. membuat menu navigasi + bacgroun image + fix-top+coonten+footer

drag and drob ke layout setelah selesai.
    klik yang bertuliskan (klik lingkaran merah)
    pilih bacground
    klik nav nya dan ganti class nya jadi "navbar-fixed-top"

Seperti gambar berikut :