TUTORIAL WEB - MEMBUAT APLIKASI TOKO WEB OFFLINE TAMPILAN LOGIN

Tutorial web membuat aplikasi toko web offline - Setelah mengenal tata letak folder dan sudah membuat database mysql kini saatnya kita memasuki tahapan ketiga yaitu membuat halaman index pada pembuatan aplikasi toko web offline.

Seperti yang sudah saya jelaskan pada artikel utama "Cara membuat aplikasi web toko offline dengan dreamweaver", Saya akan membagi tahapan menurut halaman website toko offline. Jadinya agar nanti saat kita eksekusi tidak bingung hehe. Karena, menurut pengalaman saya dulu waktu pertama belajar web, bingung ini saya buat halaman apa sih kok kodingnya kek gini :D biar sobat yang baru belajar tidak seperti saya, akhirnya saya bagi per halaman saja.

Oke kita masuk ke tutorial web yaitu tahapan ke 3 dalam membuat aplikasi toko web offline. Sebenarnya banyak yang menyediakan aplikasinya. Bahkan lebih lengkap fiturnya dari punya saya, tapi sekali lagi, saya buat tutorial web ini dari awal berniat untuk mengenalkan sobat yang baru belajar web supaya tahu dasar - dasarnya dan struktur alur pemrograman web. Percuma punya website bagus tapi tidak bisa mengotak atiknya. Sekali otak atik error, terus Undo, yaah gimana mau bisa. Jadinya, saya membuat tutorial web ini, terkhusus buat sobat yang mau belajar dari awal. 

Oh iya, buat sobat yang baru bergabung silakan baca "Cara membuat aplikasi web toko offline dengan dreamweaver", yang merupakan postingan utama dari setiap artikel yang saya tulis. Jadinya sobat bisa mengerti langkah kerja dari apa yang akan kita pelajari.

TUTORIAL WEB - MEMBUAT TAMPILAN LOGIN APLIKASI TOKO WEB OFFLINE

Tahapan ketiga adalah membuat halaman index, kamu bisa melihat hasilnya terlebih dahulu, bisa diklik kalau belum jelas.


Terlebih dahulu saya jelaskan gambar tersebut. Gambar tersebut bisa dilihat adalah halaman index. Kenapa log in kasir ? Karena memang tutorial web ini adalah web offline untuk toko konvensional saja. Jika mau mengembangkan ke toko online juga bisa. Asal tau alurnya terlebih dahulu.Oke kita masuk langkah - langkahnya.

1. Buka dreamweaver yang sudah sobat install di PC. Kalau belum install silakan simak tutorial ini

2. Aktifkan juga XAMPP. Belum install juga ? Hadeeh, nih ikuti tutorial ini

3. Sudah buat database kan ? Kalau belum buat terlebih dahulu, ikuti postingan saya sebelumnya. Kalau kamu ikutin postingan utama mengenai "Cara membuat aplikasi web toko offline dengan dreamweaver" kamu nggak bakal tersesat deh :D Tapi jika kamu ngikutin tutorialnya dari tengah - tengah ya jangan salahin saya jika sobat bingung, tapi jika bingung sobat boleh berkomentar kok :)

4. Setelah Dreamweaver terbuka, Klik blank Page > Pilih Html > Create. Kemudian silakan sobat untuk mengetik kode berikut. Jangan copas, sekali lagi jangan copas, karena jika sampai jadi kebiasaan, nanti sobat akan malas untuk mengembangkan sebuah koding. Nah, letak dari kode ini adalah dibawah </title>

<style>
.bg{
background-color:#FFFFFF;
width:370px;
height:200px;
padding:100px 20px 100px 20px;
margin-top:7%;
border-radius:200px;
margin-bottom:15px;
text-align:center;
font-family:"Arial Black", Gadget, sans-serif;
font-size:36px;
color:#03F;
text-decoration:none;
    }
.ak{
background-color:#FFFFFF;
width:200px;
height:0px;
padding:50px 0px 50px 0px;
margin-top:-95px;
border-radius:0 0 200px 200px;
margin-bottom:15px;
text-align:center;
font-family:"Arial Black", Gadget, sans-serif;
font-size:18px;
color:#03F;
text-decoration:none;
float:right;
    }
input[type="text"],[type="password"]{
width:200px;
height:20px;
padding:10px 5px 10px 5px;
background-color:#FFF;
border:solid 1px #00F;
border-radius:7px;
transition:all ease-in-out 0.2s;
position:relative;
margin-bottom:5px;
    }
input[type="text"],[type="password"]:hover{
display:block;
background:rgba(204,204,204,0.2);

    }
input[type="submit"]{
width:210px;
height:50px;
background-color:#03F;
border:#06F 1px groove;
border-radius:7px;
transition:all ease-in-out 0.2s;
color:#FFF;
margin-top:10px;
    }
input[type="submit"]:hover{
display:block;
background:#06F;

    }
.cek
{
    padding:15px;
    margin-bottom:20px;
    border:1px solid transparent;
    border-radius:4px;
    color:#843534;
    background-color:#f2dede;
    margin-top:-10px;
}
a {
    text-decoration:none;
    }
</style>

Ketika kamu membuat file html pertama kali, akan ada kode berikut. Nah letakkan kode <style> diatas berada dibawah </title>. Ingat ya sobat semua kode style css berada dibawah title.



5. Oke, masih bingung dengan style yang saya buat ? Kok bisa tampilannya seperti gambar pertama ?
Saya jelaskan satu persatu, karena memang saya kepingin sobat semua tau benar kode apa yang menghasilkan tampilan seperti itu.

Ada dua jenis penginisialisasian menurut saya, # untuk id dan . untuk class... penggunaannya cukup mudah dimengerti <div class> dan <div id> sama aja sih sebenarnya tapi ada penerapan fungsi class dan id yang sedikit berbeda.

Lihat class .bg {..............} Nah itu adalah kode untuk mengatur tampilan pada background dari tampilan index. Apa nama class nya harus .bg ? (pertanyaan temen saya dulu :D) Tidak harus, nama class harus diawali . titik dan terserah mau menamakan apa, kalau saya simple aja, pakai singkatan background jadinya bg, karena class tinggal tambahin titik didepannya.

Lihat class .ak {..............} Terserah saya mau menamakan class nya apa :P Nah, untuk class .ak itu digunakan untuk membuat lingkaran putih besar ditengah (lihat gambar paling atas). Kenapa bisa bundar ya, :D Silakan otak atik kodingnya.

Lihat input[type="text"],[type="password"]{............................} Kenapa tidak pakai titik ? Karena sudah jelas, kode css tersebut digunakan untuk memberi style pada sebuah form inputan. Dalam tampilan index ini adalah inputan username dan password. Kalau tidak pakai style sih tidak apa - apa tapi jelek :D Untuk penambahan hover, itu untuk menambah efek apa yang terjadi ketika inputan dideketin cursor :D

Lihat class .cek {...............} Itu adalah class yang nantinya muncul ketika ada error, seperti misalnya username atau password salah. Tanpa style pun sebenarnya tidak apa, tapi ya itu kurang bagus :D, ingat class ini hanya muncul ketika terjadi error ya sobat.

Lihat a {..............} Itu digunakan untuk membuat style link yang ada di halaman index, coba lihat link pada gambar awal, tidak ada garis bawahnya kan ? Secara default, link yang ada dibrowser akan bergaris bawah, tapi jika digunakan style css maka tidak ada garis bawahnya. Bahkan kamu bisa mengubah warna link.

Oke kita lanjut, kode dibawah adalah untuk menampilkan atau memanggil kode css yang sudah kita ketik diatas. Letaknya berada dibawah kode <body>. Agar sama dengan saya sialakan tambahkan bgcolor="#00050A" setelah <body. Jadinya <body bgcolor="#00050A">

<?php
//kode php ini digunakan untuk menampilkan pesan error
if(!empty($_GET['error']))
    {
    if($_GET['error']==1)
        {
            echo '<div class="cek"><font face="Arial, Helvetica, sans-serif"><center><b>Username dan Password belum diisi!</center></font></div>';
        }
    else if($_GET['error']==2)
        {
            echo '<div class="cek"><font face="Arial, Helvetica, sans-serif" ><center><b>Username belum diisi!</center></font></div>';
        }
    else if($_GET['error']==3)
        {
            echo '<div class="cek"><font face="Arial, Helvetica, sans-serif" ><center><b>Password belum diisi!</center></font></div>';
        }
    else if($_GET['error']==4)
        {
            echo '<div class="cek"><font face="Arial, Helvetica, sans-serif" ><center><b>Username atau Password tidak terdaftar, Silakan Hubungi Administrator </center></font></div>';
        }
    else if($_GET['error']==5)
        {
            echo '<div class="cek"><font face="Arial, Helvetica, sans-serif" ><center><b>Anda belum login. Silakan login terlebih dahulu!</center></font></div>';
        }
    }
?>
<div align="center"><div class="ak"><a href="index-admin.php"><div style="margin-top:-20px;">Log In Admin</div></a></div>
  <div class="bg">Log In<div align="center">
    <p>
    <form action="login/cekkasir.php" method="post" name="form1">
<input type="text" name="user" placeholder="ID Kasir" />
<input type="password" name="pass" placeholder="password"/>
<input type="submit" name="submit" value="Log In"/></div>
</p></form></div>
</div>
<div style="color:rgba(255,255,255,1);text-align:center"><br />&copy; Bambang 2017</div>

Sebenarnya saya tidak ingin menyentuh kode PHP dulu, tapi jika tidak digunakan maka sobat bisa bingung dengan kode css nya juga. Buat apa class .cek jika tidak dimunculkan, baiklah saya langsung saja pakai kode PHP nya, tapi saya menjelaskan htmlnya nya dulu ya guys.

kode <style> hingga </style> yang berada dibawah kode </title> adalah kode css. Tanpa kita memanggil kode css, maka tampilan di browser ya sama aja kosong. Nah, sekarang kita akan memanggil kode css diatas dengan menggunakan tag <div class="">..........</div>

Lupakan sejenak kode PHP nya, fokus dengan tag <div class=""> tapi tetap perhatikan tag <div class=""> didalam kode PHP. Perhatikan semua nama yang berada di dalam <div class=""> sama dengan nama class di css nya kan ? Memang harus sama, karena jika berbeda dengan nama css nya ya berarti manggil kode apa ? Jadinya harus sama dengan nama class css (.bg .ak .cek)

Maksud kode PHP diatas adalah jika seseorang user salah dalam menginputkan username atau password bahkan mengosongkan inputan username dan password maka kode tersebut akan berfungsi dan akan menampilkan error. Silakan simak satu persatu error yang ada mulai dari Username dan password belum diisi dan seterusnya.

Ada yang nanya, kok bisa tau kalau username atau password salah ? Saya jelaskan, data inputan yang dimasukkan user didalam website akan dicek terlebih dahulu cocok apa tidak dengan username dan password yang ada di dalam database. Jika username dan password di database cocok dengan apa yang diinputkan oleh user di dalam website maka user tersebut baru bisa mengaksesnya sebagai kasir atau sebagai admin.

Nah, kode pengecek username dan password akan saya jelaskan pada tutorial web selanjutnya ya sobat. silakan subscribe agar tidak ketinggalan.

Tutorial web ini memang saya bahas satu persatu, biar sobat tau struktur alur pengerjaan sebuah web. Mulai dari membuat kode css, hingga memanggil kode css nya. Semua itu membutuhkan kesabaran dan ketelitian.

Tags : Tutorial web, web programing, coding web

Oktober 25, 2017 - tanpa komentar

0 komentar untuk TUTORIAL WEB - MEMBUAT APLIKASI TOKO WEB OFFLINE TAMPILAN LOGIN.


Perlihatkan Semua Komentar Tutup Semua Komentar