TUTORIAL WEB MEMBUAT APLIKASI TOKO WEB OFFLINE HALAMAN MENU UTAMA

tutorial web membuat halaman menu
tutorial web membuat halaman menu

Tutorial Web membuat halaman menu utama pada aplikasi toko web - Selamat datang kembali sobat, setelah melalui tahap ke 3 dalam membuat aplikasi toko web offline. Kali ini saya akan melanjutkan tutorial web ini dan lanjut tahap ke 4. Pada tahap ke 4 kita akan membuat halaman menu utama pada aplikasi toko web offline.

Sesuai dengan apa yang akan kita bahas, menu utama ini adalah gerbang utama bagi seorang user menjelajahi suatu aplikasi web. Tanpa adanya menu pastinya akan terasa menyulitkan bagi seorang user. Maka dari itu sebuah aplikasi yang user friendly harus ada menu.

Postingan kali ini adalah bagian dari postingan utama. Jika sobat memang mau membuat aplikasi toko web offline dari awal silakan ikuti postingan utama ini. Kalaupun memang sobat mencari tutorial web tentang menu silakan simak saja postingan kali in.

Cara Membuat Menu Utama Pada Aplikasi Toko Web

1. Aktifkan XAMPP terlebih dahulu.

2. Setelah itu buka aplikasi dreamweaver sobat. Silakan klik blank page dan pilih PHP.

3. Sebelum memulai mengkoding, silakan untuk menyimpan nya terlebih dahulu di Folder web sobat (contoh: C:XAMPP/htdocs/2587/admin). Jika masih bingung silakan ikuti pengenalan tata letak folder berikut.

4. Setelah disimpan, sialakan sobat mengetikan kode berikut. Silakan di ketik ya, agar terbiasa mengkoding dan bisa mengembangkan sebuah kode. Letak kode berikut sudah tau kan sobat ? hehe, berada di bawah </title>


<style>
.header{
    position:fixed;
    width:100%;
    height:60px;
    padding:10px;
    background:#2980b9;
    margin-top:-140px;
    margin-left:-10px;
    z-index:9999;
    margin-bottom:50px;
    }
.menu{
    width:1000px;
    height:350px;
    border-radius:10px;
    background-color:rgba(255,255,255,1);
    border:solid 1px #999;
    margin-top:80px;
    }
#logo{
    width:150px;
    height:150px;
    background:rgba(204,204,204,0.4);
    border-radius:100px;
    margin-left:140px;
    margin-top:20px;
    margin-right:0px;
    float:left;
    position:relative;
    transition:all ease-in-out 0.5s;
    }
#logo:hover{
    display:block;
    background:rgba(153,153,153,1);
    }
.logo{
    width:60px;height:60px;position:absolute;
    transition:all ease-in-out 1s;
    }
.logo:hover{
    transform:rotate(360deg);
    }
.btn-warning{
    color:#fff;
    background-color:#f0ad4e;
    border-color:#eea236;
    transition:all ease-in-out 0.15s;
    float:right;
     margin-right:50px;
     font-size:18px;
      text-decoration:none;
      border-radius:2px;
      margin-top:-75px;
       padding:4px;
       z-index:99999;
       position:relative;
       width:60px;
}
.btn-warning:hover{
    background-color:rgba(255,204,102,1);
}
a{
    color:#006699;
    font-family:Calibri;
    }
</style>

Bisa sobat simak gambar berikut

tutorial web membuat halaman menu
tutorial web membuat halaman menu


Gambar diatas adalah hasil dari style css yang saya buat diatas.
Lihat pada bagian class .header {...........}  Pada class tersebut saya buat dengan position fixed, artinya header tersebut posisi nya tetap dan tidak terpengaruh jika halaman discroll. Silakan untuk mengedit kode - kodenya yang berada di dalam class header, jika ingin warna lain silakan di ubah. Nah untuk mengetahui kode - kode warna, sobat bisa mengecek secara online, ataupun mengecek dengan menggunakan corel draw.

Lihat class .menu {............}  Hasil dari class ini adalah kotak putih yang memiliki border solid. Sebenarnya sih saya buat begitu hanya agar terlihat lebih rapi dan enak dipandang serta agar peletakan menu (distributor, kasir, buku, pasok, penjualan) menjadi lebih mudah.

Lihat class .logo {...........} Jika sobat berencana membuat logo silakan buat sama dengan seperti saya berbentuk lingkaran atau mendesain sendiri dengan bentuk lain. Saran saya jika logo sobat tidak lingkaran, lebih baik efek hover pada class .logo:hover dihilangkan saja, sebab saya tambahkan efek memutar pada logonya, jika bentuknya tidak lingkaran ya jadinya tidak bagus :D Coba deh di otak atik 

Lihat class id #logo {.............} Pada tutorial web ini memang saya buat sama namanya, tetapi berbeda. Maksudnya yang satu id dan yang satu class tetapi dengan nama yang sama. Meskipun sama penggunaannya berbeda lhoh. Pada tutorial web ini, class .logo saya gunakan pada gambar logo web toko, tapi untuk id #logo untuk gambar logo menu (lihat gambar logo menu pada distributor, kasir, pasok ,dll)

Lihat class .btn-warning {..............} Sebenarnya untuk menamai sebuah class atau id boleh dengan nama apa saja yang menurut sobat paling mudah di ingat. class .btn-warning ini adalah tombol yang berada di pojok kanan atas. kode didalamnya ada Z-index, itu berarti jika nilainya semakin besar maka class .btn-warning akan berada diatas dari sebuah konten yang tidak memiliki z-index. 

Bisa sobat lihat btn-warning berada diatas header. Kalau kamu mendesain corel pasti akan ada 2 objek, yang satu berada diatas objek lain (shift+pgup) nah maksud saya juga begitu sobat, jika corel menggunakan shift+pgup maka dreamweaver menggunakan z-index agar objek berada diatas objek yang lain. Sudah mengerti ? hehe. Untuk kode lain silakan sobat cari tau sendiri hehe atau nanti saya buatkan e-book tentang kode - kode css.

Seperti tutorial web yang sudah saya posting, fungsi a{........} adalah untuk memberi style pada link. Dan untuk class yang ada hover adalah untuk memberikan efek pada objek yang dikehendaki.

5. Ketik kode berikut, untuk memanggil kode css. Letaknya berada didalam <body></body>


<div class="header">
    <img src="../image/logo.png" class="logo"/>

    <h2 style="font-size:46px;position:relative;margin-left:90px;margin-top:-0px;color:#f0f0f0;text-decoration:none;line-height:    60px;font-family:Calibri;">Hamzah Star Book</h2>

    <div style="float:right; margin-right:120px; font-size:14px;border-radius:2px;margin-top:-72px; padding:4px;position:relative;color:rgba(255,255,255,1);font-family:Calibri, Verdana;">(admin)</div>

    <img src="../image/adm.png" style="width:25px; height:25px;float:right; margin-right:165px; font-size:13px;border-radius:2px;margin-top:-75px; padding:4px;"/>

    <a href="../login/logout.php"><div class="btn-warning">Log out</div></a>
</div>

    <h3 style="position:relative; margin-top:140px;text-align:center;font-family:Calibri;color:#2980b9;">Selamat datang di halaman Admin, silakan pilih menu dibawah ini</h3>
<div align="center"><div class="menu">
    <a href="distributor.php"><div id="logo"><img src="../image/distributor.png" style="width:120px;height:120px;"/><h3 style="margin-top:-20px;">Distributor</h3></div></a>
   
    <a href="kasir.php"><div id="logo"><img src="../image/kasir.png" width="90" style="width:65px;height:80px;margin-top:20px;"/><h3 style="margin-top:0px;">Kasir</h3></div></a>
   
    <a href="buku.php"><div id="logo"><img src="../image/buku.png" style="width:120px;height:120px;"/><h3 style="margin-top:-20px;">Buku</h3></div></a>
   
    <a href="pasok.php"><div id="logo" style="margin-left:285px;"><img src="../image/pasok.png" style="width:80px;height:80px;margin-top:20px"/><h3 style="margin-top:0px;">Pasok</h3></div></a>
   
    <a href="penjualan.php"><div id="logo" style="margin-left:140px;"><img src="../image/penjualan.png" style="width:100px;height:70px;margin-top:30px;margin-left:0px"/><h3 style="margin-top:0px;">Penjualan</h3></div></a>
    </div>
</div>

Tidak selamanya style css dituliskan di atas </head>, sebenarnya style css juga bisa disisipkan pada saat menggunakan tag <div> dengan cara menambahkan statement style. Silakan disimak pada kode ini <h2 style="font-size:46px;position:relative;margin-left:90px;margin-top:-0px;color:#f0f0f0;text-decoration:none;line-height:    60px;font-family:Calibri;">Hamzah Star Book</h2> 

Kode tersebut sudah memiliki style css, saya memang sengaja tidak menaruh kode css nya berada di atas </head> karena agar sobat tahu, jika style css bisa ditambahkan bersama dengan tag <div>
Saran saya, buatlah style css berada diatas </head> agar mudah saat sobat mencari kode dan ingin mengeditnya.



6. Simpan file tersebut dengan nama admin.php
(ingat, letak file tersebut berada didalam folder 2587 > admin)

Oke, sekian tutorial web kali ini. Silakan berkomentar jika masih bingung. Tunggu tutorial web selanjutnya ya sobat, agar tidak ketinggalan silakan subscribe.


Terimakasih sudah mampir, silakan like FP saya di setiaji358 atau klik Like disamping kanan sobat :)

Oktober 28, 2017 - tanpa komentar

0 komentar untuk TUTORIAL WEB MEMBUAT APLIKASI TOKO WEB OFFLINE HALAMAN MENU UTAMA.


Perlihatkan Semua Komentar Tutup Semua Komentar