Senin, 08 Juli 2013

  • [ Njepat Store ] Membuat form Njepat Store

    Assallmualaikum wr. wb.

    Njepat Store, adalah aplikasi hitung berbasis web sederhana yang berfungsi untuk menghitung harga dari suatu barang yang diakumulasikan berdasarkan harga diskon dan harga Ongkos kirim dari suatu kota, yang tiap-tiap kota memiliki harga ongkos kirim yang berbeda. dalam postingan saya kali ini, saya akan membahas form terlebih dahulu. untuk penampakan dari aplikasi ini, kurang lebih seperti berikut :



    Sebelum nya download dulu bahan beserta source lengkapnya,
    DOWNLOAD

    Pertama, buat kita buat page dengan nama index.php , bisa pke notepad, atau text editor lainnya. lalu ketikan script berikut :

      
      
    
    
    
        Njepat Store
        
    
    
        

    Status
    Kota
    Hasil Barang yang dipesan :
    Nama Barang : Harga Barang : Rp. Jumlah Barang : Harga Barang : Rp. Status : Diskon Barang : Rp. Ongkos Kirim untuk kota : Rp. TOTAL : Rp.


    setelah itu, buat lagi halaman baru lalu beri nama style.css dan ketik :
     /*Nisan Ganteng :p*/
    *{
        padding:0px; margin:0px;
    }
    body{
        background: #ECF0F1;
        
    }
    @font-face {
    font-family: nisan;
    src: url(font/laoui.TTF);
    }
    /*+++++++++++++++++++++++++++++++++++ Main +++++++++++++++++++++++++++++++++++*/
    #wrapper{
        width:100%;
        height: auto;
        background: #ECF0F1;
        
    }
    #title{
        width:800px;
        height: auto;
        margin:0px auto;
        background-color: #ECF0F1;
        
    }
    
    #title h1 {
        width: 200px;
        height: 78px;
        background:#ECF0F1 url(images/logo.png) 0 0 no-repeat;
        margin-top:5px;
        margin-bottom: 10px;
    }
    
    #title h1 a {
        display: block;
        width: 200px;
        height: 78px;
    }
    #bg_content{
        width:100%;
        height: auto;
        background: #E74C3C;
    }
    #content{
        width:800px;
        height: 415px;
        margin:0px auto;
        background: #E74C3C;
    }
    #sidebarkiri{
        float:left;
        width: 388px;
        height: 415px;
        border-right: 1px;
        border-right-style: dotted;
        border-right-color: #ECF0F1;
        
    }
    
    /*+++++++++++++++++++++++++++++++++++ sidebar kiri +++++++++++++++++++++++++++++++++++*/
    #navigasi {
        margin-top:15px;    
    }
    
    #navigasi li{
        display: inline;
        list-style: none;
        margin-right: 15px;
    }
    
    #navigasi a{
        width:30px;
        text-decoration: none;
        color:#fff;
        padding: 8px;
        font-family: nisan;
        font-size: 14px;
    }
    
    #navigasi a:hover{
        color:#F1C40F;
        padding: 8px;
    }
    #status{
        width: 308px;
        height: 50px;
        background:  #ECF0F1;
        border:1px solid #ECF0F1;
        margin-top:15px;
        font-family: nisan;
        
    }
    #title_status , #title_kota{
        float: left;
        width:100px;
        padding-left:8px;
        padding-top:12px;
        background: #BDC3C7;
        height: 38px;
        color:#ECF0F1;
        font-family: arial;
        
    }
    #form_status{
        float: left;
        width: 180px;
        margin-left:10px;
    }
    #form_status p{
        margin-top:5px;
        font-size: 13px;
    }
    
    #kota{
        width: 308px;
        height: 50px;
        background:  #ECF0F1;
        border:1px solid #ECF0F1;
        margin-top:15px;font-family: nisan;
    }
    
    #form_kota{
        float: left;
        width: 190px;
        margin-left:10px;
    }
    .input{
        width: 300px;
        height: 30px;
        margin-top: 15px;
        margin-bottom: 5px;
        padding-left: 8px;
        border:1px solid #ECF0F1;
    }
    .radio{
        margin-right: 8px;
    }
    
    .select{
        width:170px;
        height: 30px;
        margin-top:9px;
        padding: 2px;
    }
    
    .submit{
        width:75px;
        height: 30px;
        margin-right: 8px;
        margin-top: 15px;
        margin-bottom: 5px;
        padding-right: 8px;
        background: #3498DB;
        color:#fff;
        border:0px;
        
    }
    
    /*+++++++++++++++++++++++++++++++++++ sidebar kanan +++++++++++++++++++++++++++++++++++*/
    
    #sidebarkanan{
        float:left;
        width: 400px;
        margin-top:15px;
        height: 300px;
        
    }
    
    #sidebarkanan p{
        font-family: nisan;
        font-size: 14px;
        height: 25px;
        margin-left:15px;
        color: #fff;    
    }
    
    #hasil p{
        height: 25px;
        margin-top: 15px;
        border-bottom: 1px;
        border-bottom-style: dotted;
    }
    
    .rehitung{
        margin-top: 15px;
        margin-left: 10px;
    }
    .rehitung a{
        height: 30px;
        padding-right: 8px;
        background: #3498DB;
        color:#fff;
        border:0px;
        text-decoration: none;
        font-size: 14px;
        padding: 8px;
    }
    
    .rehitung a:hover{
        color:#E74C3C;
    }
    
    /*+++++++++++++++++++++++++++++++++++ footer +++++++++++++++++++++++++++++++++++*/
    #footer{
        width:800px;
        height: auto;
        margin:0px auto;
        margin-top: 15px;
    }
    
    #footer p{
        font-family:nisan;
        font-size:12px;
    }
    
    #footer a{
        text-decoration: none;
        color:#E74C3C;
    }
    
    #footer a:hover{
        color: #3498DB;
    } 
    

    Untuk Proses phpnya bisa di lihat pada postingan ini .
    Sekian dari saya, semoga bermanfaat
    wassallamualaikum wr. wb

  • 1 komentar:

    1. assalamualaikum, marhaban ya ramadhan, senyum sapa dari saya denny aby untuk para sobat blogger di bulan yang suci dan penuh berkah ini....selamat menunaikan ibadah puasa sobat...

      BalasHapus

    Copyright @ 2013 Nisan BL0G.