PEMBUATAN APLIKASI TOKO GADGET ONLINE SEDERHANA

Unknown
By -Unknown
19:30
0


Aplikasi Toko Gadget Online ini dibuat dengan sederhana yaitu hanya dengan menampilkan produk yang di ambil dari Database dan Sistem Keranjang Belanja (cart) yang dibuat pun dengan SESSION dan bukan dari Database seperti pada umumnya. Adapun pada aplikasi ini terdapat detail keranjang belanja, dan juga checkout.


1. Tampilan Awal/Beranda

Pada tampilan awal ini menampilkan beberapa produk gadget yang tersedia untuk diorder.



2. Tampilan pembelian, Keranjang belanja
Setelah pembeli memilih gadget, orderan akan masuk ke tampilan keranjang belanja.


Tampilan Keranjang belanja


3. Tampilan detail produk gadget yang diorder
Pada tampilan ini menampilkan detail produk yang diorder atau yang akan dibeli oleh pembeli. Pembeli pun dapat menambahkan, mengurangi jumlah dan menghapus produk yang akan dibeli.

4. Checkout
Pada tampilan ini berfungsi untuk memasukkan data pembeli.





A. Source Code Aplikasi Toko Gadget Online Sederhana

1. Source code config.php

<?php
error_reporting(0);
session_start();
ob_start();

mysql_connect("localhost", "root", "");
mysql_select_db("cart");
?>


2. Source Code style.css

body {
    background-color: #DDD;
    font-family: tahoma;
    font-size: 12px;
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #CCC;
}

#container {
    width: 800px;
    margin: 20px auto;
    background-color: #FFF;
}

#header {
    text-align: center;
    padding: 20px;
}
   
    #header h1 {
        margin: 0;
        padding: 0;
        text-decoration: underline;
    }

    #header span {
        font-size: 12px;
        font-style: italic;
    }

#menu {
    background-color: #DDD;
    border-top: 1px dashed #CCC;
    border-bottom: 1px dashed #CCC;
    margin-bottom: 20px;
    text-align: center;
}

    #menu a {
        display: inline-block;
        padding: 5px 10px;
        text-decoration: none;
        font-weight: bold;
        color: #000;
    }

        #menu a:hover {
            background-color: #000;
            color: #FFF;
        }

        #menu a.selected {
            background-color: #000;
            color: #FFF;
        }

#sidebar {
    width: 200px;
    float: left;
    margin-left: 20px;
}

    #sidebar .title {
        font-size: 14px;
        font-weight: bold;
        border-bottom: 1px solid #000;
    }

    #sidebar .body {
        margin: 10px 0 20px 0;
    }

#content {
    width: 520px;
    float: right;
    padding: 0px 12px;
    margin-right: 20px;
    border-left: 1px dashed #CCC;
}

    #content .title {
        font-size: 14px;
        font-weight: bold;
        border-bottom: 1px solid #000;
        margin-bottom: 10px;
    }

    #content .item {
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px dotted #CCC;
    }

        #content .item p {
            margin: 3px 0px;
            padding: 3px 0px;
        }

#footer {
    font-size: 10px;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    border-top: 1px dashed #CCC;
}

.clear {
    clear: both;
}


3. Source code cart.php

<?php
require_once("config.php");

if(isset($_GET['add'])){
    $id = mysql_real_escape_string((int)$_GET['add']);
    $qt = mysql_query("SELECT produk_id, produk_jumlah FROM tw_produk WHERE produk_id='$id'");
    while($qt_row = mysql_fetch_assoc($qt)){
        if($qt_row['produk_jumlah'] != $_SESSION['cart_'.$_GET['add']] && $qt_row['produk_jumlah'] > 0){
            $_SESSION['cart_'.$_GET['add']]+='1';
            header("Location: index.php");
        } else {
            echo '<script language="javascript">alert("Stok produk tidak mencukupi!"); document.location="index.php";</script>';
        }
    }

}

function cart(){
    foreach($_SESSION as $name => $value){
        if($value > 0){
            if(substr($name, 0, 5) == 'cart_'){
                $id = substr($name, 5, (strlen($name)-5));
                $get = mysql_query("SELECT * FROM tw_produk WHERE produk_id='$id'");
                while($get_row = mysql_fetch_assoc($get)){
                    $sub = $get_row['produk_harga'] * $value;
                    echo '<div style="font-size:11px; margin-bottom:-10px">&raquo; '.$get_row['produk_nama'].' @ Rp. '.$get_row['produk_harga'].' X '.$value.' = Rp. '.$sub.'</div><br>';
                }
            }
            $total += $sub;
        }
    }
    if($total == 0){
        echo 'Keranjang Belanja Kosong!';
    } else {
        echo '<div style="text-align:right; font-size:11px;"><a href="detail.php">&raquo; Detail &laquo;</a></div>';
    }
}

function produk(){
    $sql = mysql_query("SELECT * FROM tw_produk ORDER BY produk_id DESC");
    if(mysql_num_rows($sql) == 0){
        echo "Tidak ada produk!";
    }else{
        while($row = mysql_fetch_assoc($sql)){
            echo '
            <div class="item">
                <b>'.$row['produk_nama'].'</b>
                <br>Harga: '.$row['produk_harga'].' &bull; Jumlah: '.$row['produk_jumlah'].' &bull; <a href="index.php?add='.$row['produk_id'].'">Beli</a></br>
            </div>
            ';
        }
    }
}
?>


4. Source code index.php

<?php require_once("cart.php"); ?>
<!DOCTYPE html>
<html>
<head>
    <title>Toko Gadget Online</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>Toko Gadget Online</h1>
            <span>Terlengkap dan Terpercaya</span>
            <br><span>Jln. Angkrek situ, Sumedang</span>
        </div>

        <div id="menu">
            <a class="selected" href="index.php">Home</a>
            <a class="selected" href="testimonial.php">Testimonial</a>
        </div>

        <div id="sidebar">
            <div class="title">&raquo; Keranjang Belanja</div>
            <div class="body">
                <?php cart(); ?>
            </div>

            <div class="title"></div>
            <div class="body">
                Selamat datang di Aplikasi Toko Gadget Online Kami.<br>
                Silahkan Order gadget yang anda inginkan. <br>
                Anda Order Kami Antar.
            </div>
        </div>

        <div id="content">
            <div class="title">&raquo; Produk Terbaru</div>
            <?php produk(); ?>
        </div>

        <div class="clear"></div>

        <div id="footer">
            Copyright &copy; 2017<br>
        </div>

    </div>

</body>
</html>


5. Source code detail.php

<?php require_once("config.php"); ?>
<!DOCTYPE html>
<html>
<head>
    <title>Toko Gadget Online</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>Toko Gadget Online</h1>
            <span>Terlengkap dan Terpercaya</span>
            <br><span>Jln. Angkrek situ, Sumedang</span>
        </div>

        <div id="menu">
            <a href="index.php">Home</a>
            <a class="selected" href="testimonial.php">Testimonial</a>
        </div>

        <div id="sidebar">
            <div class="title"></div>
            <div class="body">
                Selamat datang di Aplikasi Toko Gadget Online Kami.<br>
                Silahkan Order gadget yang anda inginkan. <br>
                Anda Order Kami Antar.
            </div>
        </div>

        <div id="content">
            <div class="title">&raquo; Detail Keranjang Belanja</div>
            <table border="0" width="100%" cellspacing="0" cellpadding="3">
                <tr style="background-color: #DDD;">
                    <th>No.</th>
                    <th>Nama Barang</th>
                    <th>Jumlah</th>
                    <th>Harga Satuan</th>
                    <th>Sub Total</th>
                    <th>Opsi</th>
                </tr>
                <?php
                //MENAMPILKAN DETAIL KERANJANG BELANJA//
                $no = 1;
                foreach($_SESSION as $name => $value){
                    if($value > 0){
                        if(substr($name, 0, 5) == 'cart_'){
                            $id = substr($name, 5, (strlen($name)-5));
                            $get = mysql_query('SELECT * FROM tw_produk WHERE produk_id='.mysql_real_escape_string((int)$id));
                           
                            while($get_row = mysql_fetch_assoc($get)){
                                if($no % 2 == 0){
                                    $warna = "#EAEAEA";
                                } else {
                                    $warna = "#F4F4F4";
                                }
                                $sub = $get_row['produk_harga'] * $value;
                                echo '
                                <tr bgcolor="'.$warna.'">
                                    <td align="center">'.$no.'</td>
                                    <td align="center">'.$get_row['produk_nama'].'</td>
                                    <td align="center">'.$value.'</td>
                                    <td align="right">Rp. '.$get_row['produk_harga'].'</td>
                                    <td align="right">Rp. '.$sub.'</td>
                                    <td align="center">
                                        <a href="detail.php?remove='.$id.'">[-]</a>
                                        <a href="detail.php?add='.$id.'">[+]</a>
                                        <a href="detail.php?delete='.$id.'" onclick="return confirm(\'Anda Yakin?\');">[x]</a><br>
                                    </td>
                                </tr>                           
                                ';
                                $no++;
                            }
                            $total += $sub;
                        }
                    }
                }
                if($total == 0){
                    echo '<tr><td colspan="5" align="center">Keranjang belanja masih kosong!</td></tr></table>';
                    echo '<p><div align="right">
                        <a href="index.php"><button>&laquo; Lanjutkan Belanja</button></a>
                        </div></p>';
                } else {
                    echo '
                        <tr style="background-color: #DDD;"><td colspan="4" align="right"><b>Total :</b></td><td align="right"><b>Rp. '.$total.'</b></td></td></td><td></td></tr></table>
                        <p><div align="right">
                        <a href="index.php"><button>&laquo; Lanjutkan Belanja</button></a>
                        <a href="checkout.php?total='.$total.'"><button>Checkout &raquo;</button></a>
                        </div></p>
                    ';
                }
                ?>
           
                <?php
                //PROSES TAMBAH JUMLAH PRODUK//
                if(isset($_GET['add'])){
                    $qt = mysql_query('SELECT produk_id, produk_jumlah FROM tw_produk WHERE produk_id='.mysql_real_escape_string((int)$_GET['add']));
                    while($qt_row = mysql_fetch_assoc($qt)){
                        if($qt_row['produk_jumlah'] != $_SESSION['cart_'.$_GET['add']]){
                            $_SESSION['cart_'.$_GET['add']]+='1';
                            header("Location: detail.php");
                        } else {
                            echo '<script language="javascript">alert("Stok barang tidak mencukupi"); document.location="detail.php";</script>';
                        }
                    }
                }
               
                //PROSES HAPUS 1 ITEM PRODUK//
                if(isset($_GET['remove'])){
                    $_SESSION['cart_'.$_GET['remove']]--;
                    header("Location: detail.php");
                }
               
                //PROSES HAPUS SEMUA ITEM PRODUK//
                if(isset($_GET['delete'])){
                    $_SESSION['cart_'.$_GET['delete']]='0';
                    header("Location: detail.php");
                }
                ?>
            </table>
        </div>

        <div class="clear"></div>

        <div id="footer">
            Copyright &copy; 2017 <br>   
   </div>

    </div>

</body>
</html>


6. Source code checkout.php

<?php require_once("cart.php"); ?>
<!DOCTYPE html>
<html>
<head>
    <title>Toko Gadget Online</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>Toko Gadget Online</h1>
            <span>Terlengkap dan Terpercaya</span>
            <br><span>Jln. Angkrek situ, Sumedang</span>
        </div>

        <div id="menu">
            <a class="selected" href="index.php">Home</a>
            <a href="testimonial.php">Testimonial</a>
        </div>

        <div id="sidebar">
            <div class="title">&raquo; Keranjang Belanja</div>
            <div class="body">
                <?php cart(); ?>
            </div>

            <div class="title"></div>
            <div class="body">
                Selamat datang di Aplikasi Toko Gadget Online Kami.<br>
                Silahkan Order gadget yang anda inginkan. <br>
                Anda Order Kami Antar.
            </div>
        </div>

        <div id="content">
            <div class="title">&raquo; Checkout &raquo; Data Pengiriman</div>
           
            Silahkan isi data pengiriman barang / produk di bawah ini:
            <form action="finish.php" method="post">
                <input type="hidden" name="total" value="<?php echo abs((int)$_GET['total']); ?>">
                <p><input type="text" name="nama" size="30" placeholder="Nama Lengkap" required></p>
                <p><textarea name="alamat" rows="3" cols="40" placeholder="Alamat Lengkap" required></textarea></p>
                <p><input type="submit" name="finish" value="Finish"></p>
            </form>
        </div>

        <div class="clear"></div>

        <div id="footer">
            Copyright &copy; 2017<br>
        </div>

    </div>

</body>
</html>


7. Source code finish.php

<?php require_once("cart.php"); ?>
<!DOCTYPE html>
<html>
<head>
    <title>Toko Gadget Online</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>Toko Gadget Online</h1>
            <span>Terlengkap dan Terpercaya</span>
            <br><span>Jln. Angkrek situ, Sumedang</span>
        </div>

        <div id="menu">
            <a href="index.php">Home</a>
            <a class="selected" href="testimonial.php">Testimonial</a>
        </div>

        <div id="sidebar">
            <div class="title"></div>
            <div class="body">
                Selamat datang di Aplikasi Toko Gadget Online Kami.<br>
                Silahkan Order gadget yang anda inginkan. <br>
                Anda Order Kami Antar.
            </div>
        </div>
       
        <div id="content">
            <div class="title">&raquo; Proses Belanja Selesai</div>
           
            <?php
            if($_POST['finish']){
                session_destroy();
                echo 'Terima kasih Anda sudah berbelanja di Toko Online kami. Dan berikut ini adalah data yang perlu Anda catat.';
                echo '<p>Total biaya untuk pembelian Produk adalah'.$_POST['total'].' dan biaya bisa di kirimkan melalui Rekening Bank BRI cabang Sumedang dengan nomor rekening xxxx-xxxx-xxxx atas nama Mekar Asih.</p>';
                echo '<p>Dan barang akan kami kirim ke alamat di bawah ini:</p>';
                echo '<p>Nama Lengkap : '.$_POST['nama'].'<br>';
                echo 'Alamat Lengkap : '.$_POST['alamat'].'</p>';

                echo 'Terima Kasih.';
            }else{
                header("Location: index.php");
            }
            ?>

        </div>

        <div class="clear"></div>

        <div id="footer">
            Copyright &copy; 2017<br>
        </div>

    </div>

</body>
</html>


8. Source code manage.php

<?php require_once("cart.php"); ?>
<!DOCTYPE html>
<html>
<head>
    <title>Toko Gadget Online</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>Toko Gadget Online</h1>
            <span>Terlengkap dan Terpercaya</span>
            <br><span>Jln. Angkrek situ, Sumedang</span>
        </div>

        <div id="menu">
            <a class="selected" href="index.php">Home</a>
            <a class="selected" href="manage.php">Manage</a>
            <a href="testimonial.php">Testimonial</a>
        </div>

        <div id="sidebar">
            <div class="title">&raquo; Keranjang Belanja</div>
            <div class="body">
                <?php cart(); ?>
            </div>

            <div class="title">&raquo; Tentang</div>
            <div class="body">Body</div>
        </div>

        <div id="content">
            <div class="title">&raquo; Manage Produk</div>
            Manage
        </div>

        <div class="clear"></div>

        <div id="footer">
            Copyright &copy; 2017<br>
        </div>

    </div>

</body>
</html>


9. Source code testimonial.php

<?php require_once("cart.php"); ?>
<!DOCTYPE html>
<html>
<head>
    <title>Toko Gadget Online</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>Toko Gadget Online</h1>
            <span>Terlengkap dan Terpercaya</span>
            <br><span>Jln. Angkrek situ, Sumedang</span>
        </div>

        <div id="menu">
            <a class="selected" href="index.php">Home</a>
            <a href="testimonial.php">Testimonial</a>
        </div>

        <div id="sidebar">
            <div class="title">&raquo; Keranjang Belanja</div>
            <div class="body">
                <?php cart(); ?>
            </div>

            <div class="title"></div>
            <div class="body">
                Selamat datang di Aplikasi Toko Gadget Online Kami.<br>
                Silahkan Order gadget yang anda inginkan. <br>
                Anda Order Kami Antar.
            </div>
        </div>

        <div id="content">
            <div class="title">&raquo; Testimonial</div>
            Tulis Testimonial Anda di bawah ini:
            <form action="" method="post">
                <p><input type="text" name="nama" placeholder="Nama Lengkap" required></p>
                <p><input type="text" name="mail" placeholder="Email Valid" required></p>
                <p><textarea name="pesan" rows="5" cols="40" placeholder="Testimonial Anda" required></textarea></p>
                <p><input type="submit" name="submit" value="Proses"></p>
            </form>
        </div>

        <div class="clear"></div>

        <div id="footer">
            Copyright &copy; 2017<br>
        </div>

    </div>

</body>
</html>

Demikian postingan mengenai Pembuatan Aplikasi Toko Gadget Online Sederhana. Sekian dan terimakasih :)


Eljan Aif Roni
TI-VIDK

You Might Like

Show more
recent

Post a Comment

0Comments

Silakan tinggalkan komentar anda. DILARANG KERAS menyimpan link blog/web pada komentar dengan tujuan backlink, Spam.

Post a Comment (0)
Share to other apps
Copy Post link