Membuat Website Responsive Penjualan Printer dengan PHP, CSS, dan JS

Website Responsive dengan PHP, CSS, dan JS





Tampilan Website




Tampilan Mobile



Mulai Praktik
Pastikan selalu nyalakan control panel nya :))


1. Buat struktur folder seperti di bawah ini



  • Folder controller berfungsi untuk menyimpan file function.php
  • Folder CSS untuk file css
  • Folder JS untuk file javascript
2. Buat database

tb_user


tb_produk


tb_transaksi

Coding PHP

function.php

<?php 
$db = mysqli_connect("localhost", "root","","ecommerce");

// membuat function pembelian produk
function beli($data){
    global $db;

    $id = $_GET['idProduk'];
    // inisialisasi variable untuk memasukkan data
    $pembeli = mysqli_real_escape_string($db, $data['pembeli']);
    $merk = mysqli_real_escape_string($db, $data['merk']);
    $tipe = mysqli_real_escape_string($db, $data['tipe']);
    $harga = mysqli_real_escape_string($db, $data['harga']);

    $metode = mysqli_real_escape_string($db, $data['metode']);

    $insert = mysqli_query($db, "INSERT INTO tb_transaksi(pembeli, produk, merk, harga, metode) VALUES('$pembeli','$tipe','$merk','$harga','$metode')");


    return mysqli_affected_rows($db);

}
function register($data){
    global $db;

    // inisialisasi variable untuk memasukkan data
    $username = mysqli_real_escape_string($db, $data['username']);
    $password = mysqli_real_escape_string($db, $data['password']);

    // enkripsi password
    $pw = password_hash($password, PASSWORD_DEFAULT);

    // melakukan pengecekan sudah ada username yg sudh terdaftar atau belum
    $cek = mysqli_query($db, "SELECT * FROM tb_user WHERE username='$username'");
    if (mysqli_num_rows($cek)==1) {
        echo "<script>
                alert('Username sudah terdaftar! silahkan coba dengan username lain!!');
            </script>";
        return false;
    }
    $insert = mysqli_query($db, "INSERT INTO tb_user(username, password) VALUES('$username','$pw')");
    return mysqli_affected_rows($db);
}
?>

login.php

<?php 
session_start();
require '../controller/function.php';

// baca session
if (isset($_SESSION['login'])) {
    header('location:index.php');
}

// logic login
if (isset($_POST['masuk'])) {
    $username = strtolower(mysqli_real_escape_string($db, $_POST['username']));
    $password = mysqli_real_escape_string($db, $_POST['password']);

    $query = mysqli_query($db, "SELECT * FROM tb_user WHERE username='$username'");

    if (mysqli_num_rows($query)===1) {
        $cek = mysqli_fetch_assoc($query);
        if (password_verify($password, $cek['password'])) {
            // set sessionnya
            $_SESSION['login'] = $username;
            echo "<script>
                alert('Selamat datang user!!');
                document.location.href='index.php';
            </script>";
            exit;
        }  
        
    }
    $error = true;  
}


?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Printer | Masuk</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <nav>
        <h1><a href="index.php">Printer</a></h1>
        <ul>
            <li>Masuk</li>
            <li>
                |
            </li>
            <li>
                <a href="register.php">Daftar</a>
            </li>
        </ul>
    </nav>
    <div class="container">
        <form action="" method="post">
            <h1>Login</h1>
            <ul>
                <li>
                    <label for="us">Username</label>
                <input type="text" name="username" id="us" placeholder="Username" required autocomplete="off"> 
                </li>
                <li>
                    <label for="pw">Password</label>
                    <input type="password" name="password" id="pw" placeholder="Password" required>
                    <?php if(isset($error)): ?>
                        <p style="color: red; font-style:italic;">username/password salah</p>
                    <?php endif; ?>    
                </li>
                <li>
                    <div class="center">
                        <button type="submit" name="masuk">Masuk</button>
                    </div>
                   
                </li>
            </ul>
        </form>
    </div>
</body>
</html>



register.php

<?php 
// buat menghubungkan ke database
require '../controller/function.php';

// if condition: klo tombol register dipencet
if (isset($_POST['register'])) {
    // jalanin function register
    if (register($_POST)>0) {
        // pindah halaman ke login page
        echo "<script>
        alert('Anda sudah mendaftar! silahkan login');
        document.location.href='login.php';
        </script>";
    }
}

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Printer | Daftar</title>
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <nav>
        <h1><a href="index.php">Printer</a></h1>
        <ul>
            <li>
                <a href="login.php">Masuk</a>
            </li>
            <li>
                |
            </li>
            <li>Daftar</li>
        </ul>
    </nav>
    <div class="container">
        <form action="" method="post">
            <h1>Register</h1>
            <ul>
                <li>
                    <label for="us">Username</label>
                <input type="text" name="username" id="us" placeholder="Username" required autocomplete="off"> 
                </li>
                <li>
                    <label for="pw">Password</label>
                    <input type="password" name="password" id="pw" placeholder="Password" required> 
                </li>
                <li>
                    <div class="center">
                        <button type="submit" name="register">Daftar</button>
                    </div>
                   
                </li>
            </ul>
        </form>
    </div>
</body>
</html>




index.php

<?php 
session_start();
// mengkoneksikan ke database
require '../controller/function.php';

// query menampilkan data dari table database





// logic membuat pagination
$query = mysqli_query($db, "SELECT * FROM tb_produk WHERE stokProduk > 0");


?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Printer | Home</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <nav>
        <h1>Printer</h1>
        <ul>
            <?php if(!isset($_SESSION['login'])): ?>
                <li>
                    <a href="login.php">Masuk</a>
                </li>
            <?php endif; ?>
            <li><a href="" onclick="konfirmasi()"><?= $_SESSION['login']; ?></a></li>
            <li>
                |
            </li>
            <li>
                <a href="register.php">Daftar</a>
            </li>
        </ul>
    </nav>

    <!-- membuat kata pengatar -->
    <div class="container">
        <div class="kalimat">
            <h2>Menjual berbagai printer dengan harga <span> Murah dan Terjangkau</span>.</h2>
            <a href="#printer">Lihat Printer</a>
        </div>
        <div class="gambar">
           <img src="1.png" alt="printer">    
        </div>
    </div>
    <!-- buat halaman abot website -->
    <div class="about">
        <h1>About this web</h1>
        <div class="background">
        <p>Website ini dibuat untuk memenuhi Ujian Kompetisi jurusan Rekayasa Perangkat Lunak. Website ini merupakan website penjualan printer.
            Fitur dari website ini hanya pembelian printer. Untuk alur pemrograman yaitu user diminta untuk melakukan login(jika belum punya akun register terlebih dahulu) kemudian ditampilkan daftar produk printer mulai dari nama printer, merk printer dan harga dari printer.
            Setelah itu user diperlihatkan detail pembelian sebelum memencet konfirmasi beli. Udah gitu doang.
        </p>
        </div>
    </div>
    <!-- buat daftar produknya -->
    <div class="produk" id="printer">
        <h1>Daftar Produk</h1>
        <?php if(mysqli_num_rows($query)==0): ?>
            <center>
                <p style="margin-top: 50px;">Produk tidak ditemukan!</p>
            </center>
        <?php endif; ?> 
        <div class="card">
            <?php foreach($query as $row): ?>
                <div class="satu">
                    <img src="<?= $row['gambarProduk']; ?>" alt="printer" width="400" height="450">
                    <ul>
                        <li>
                            <h3><?= $row['merkProduk']; ?></h3>    
                        </li>
                        <li>
                            <p><?= $row['tipeProduk']; ?></p>
                        </li>
                        <li>
                            <p>Rp. <?= $row['hargaProduk']; ?></p>
                        </li>
                        <li>
                            <p><b>Stok : <?= $row['stokProduk']; ?></b></p>
                        </li>
                        <li>
                            <a href="beli.php?idProduk=<?= $row['idProduk']; ?>">Beli Sekarang</a>
                        </li>
                    </ul>
                </div>   
            <?php endforeach; ?>
        </div>
        
    </div>
    <!-- membuat footer -->
    <footer>
        <h4 style="color: white;">copyright cersyafaa. Made by love</h4>   
    </footer>
    <script>
        function konfirmasi(){
            if (confirm('Anda yakin ingin keluar?')) {
                document.location.href = 'logout.php';
            } else {
                return false;
            }
        }
    </script>
</body>
</html>





beli.php

<?php 
session_start();
require '../controller/function.php';

if (!isset($_SESSION['login'])) {
    echo "<script>
        alert('Anda belum melakukan login! silahkan login terlebih dahulu');
        document.location.href='login.php';
    </script>";
}
$id = $_GET['idProduk'];

// query menampilkan data table produk
$result = mysqli_query($db, "SELECT * FROM tb_produk WHERE idProduk='$id'");
$row = mysqli_fetch_assoc($result);

// memanggil function untuk menambahkan data transaksi
if (isset($_POST['beli'])) {
    if (beli($_POST)>0) {
        
        $stokAkhir = $row['stokProduk'] - 1;
        $end = mysqli_query($db, "UPDATE tb_produk SET stokProduk='$stokAkhir' WHERE idProduk='$id'");
        echo "<script>
        alert('berhasil di beli');
        document.location.href='index.php';
        </script>";
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Printer | Transaksi</title>
    <link rel="stylesheet" href="css/beli.css">
</head>
<body>
    <nav>
        <h1>Printer</h1>
        <ul>
            <li><a href="" onclick="konfirmasi()"><?= $_SESSION['login']; ?></a></li>
            <li>
                |
            </li>
            <li>
                <a href="register.php">Daftar</a>
            </li>
        </ul>
    </nav>
    <div class="struk">
        <h2>Detail Pembelian</h2>
        <form action="" method="post">
            <ul>
                <li>
                    <label for="pembeli">Pembeli</label>
                    <input type="text" name="pembeli" id="pembeli" value="<?= $_SESSION['login']; ?>" readonly>
                </li>
                <li>
                    <label for="merk">Merk Produk</label>
                    <input type="text" name="merk" id="merk" value="<?= $row['merkProduk']; ?>" readonly>
                </li>
                <li>
                    <label for="tipe">Tipe Produk</label>
                    <input type="text" name="tipe" id="tipe" value="<?= $row['tipeProduk']; ?>" readonly>
                </li>
                <li>
                    <label for="harga">Harga</label>
                    <input type="number" name="harga" id="harga" value="<?= $row['hargaProduk']; ?>" readonly>
                </li>
                <li>
                    <label for="metode">Metode Pembayaran</label>
                    <select name="metode" id="metode">
                        <option disabled>--Pilih Metode--</option>
                        <option value="COD">COD</option>
                    </select>
                </li>
                <li>
                    <center>
                    <button type="submit" name="beli">Beli Sekarang</button>
                    </center>
                </li>
            </ul>
        </form>
    </div>
    <script>
        function konfirmasi(){
            if (confirm('Anda yakin ingin logout?')) {
                document.location.href = 'logout.php';
            } else {
                return false;
            }
        }
    </script>
</body>
</html>




logout.php

<?php 
session_start();
session_unset();
session_destroy();

header('location:index.php');
?>




Codingan CSS

index.css

*{
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

:root{
    --warna: #65647C;
    --mainwarna: #804674;
}

html{
    scroll-behavior: smooth;
}
/* styling navbar */
nav{
    background-color: var(--mainwarna);
    padding: 20px;
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
nav h1{
    font-size: 28px;
}
nav ul{
    display: flex;
}
nav ul li{
    list-style: none;
    margin-right: 6px;
    font-weight: 500;
    
}
nav ul li a{
    text-decoration: none;
    color: white;
}
nav ul li a:hover{
    color: black;
    transition: 0.5s;
    
}

/* styling kata oengantar */
.container{
    margin-top: 100px;
    padding: 50px;
    
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.kalimat{
    padding: 50px;
}
.kalimat h2{
    font-size: 48px;
    margin-bottom: 28px;
}
.kalimat  h2 span{
    color: var(--mainwarna);
}

.kalimat a{
    border: 2px solid var(--mainwarna);
    color: var(--mainwarna);
    text-decoration: none;
    padding: 12px;
    border-radius: 10px;
    font-size: 24px;
}
.kalimat a:hover{
    background-color: var(--mainwarna);
    color: white;
}
.container .gambar{
    display: flex;
    justify-content: center;
}
.gambar img{
    height: 62%;
    width: auto;
}

/* styling about */
.about{
    
    background-color: var(--warna);
    padding: 40px;
}
.about h1{
    text-align: center;
    color: white;
    text-decoration: underline;
    margin-bottom: 10px;
}
.background{
    margin: auto;
    color: white;
    width: 80%;
    padding: 22px;
}
.background p{
    text-align: justify;
}

/* styling card printer */
.produk{
    padding: 70px;

}
.produk h1{
    text-align: center;
    margin-bottom: 50px;
}

.card{
    margin: auto;
    

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
}
.satu{
    border: 1px solid #757575;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding-bottom: 20px;
    
}

.satu img{
    width: 100%;
    height: auto;
    border-bottom: 1px solid black;
}

.satu ul li{
    margin: 15px;
    list-style: none;
}
.satu ul li a{
    text-decoration: none;
    color: white;
    background-color: var(--mainwarna);
    padding: 6px;
    border-radius: 8px;
}

/* styling footer */
footer{
    background-color: var(--warna);
    margin-top: 50px;
    padding: 50px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* styling responsive nya */

@media (max-width:1000px) {
    
    .card{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width:801px) {
    .container{
        grid-template-columns: 1fr;
        padding: 0;
    }
    .container .kalimat h2{
        font-size: 42px;
    }
    .container .kalimat a{
        font-size: 20px;
    }
    .gambar{
        display: flex;
        justify-content: center;
    }
    .gambar img{
        
        width: 80%;
        height: auto;
    }
    .card{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:450px) {
    .container .kalimat h2{
        font-size: 30px;
    }
    .container .kalimat a{
        font-size: 16px;
    }
    .card{
        grid-template-columns: 1fr;
    }
}




login.css

*{
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root{
    --warna: #65647C;
    --mainwarna: #804674;
}

body{
    background-color: var(--mainwarna);
}
nav{
    background-color: var(--mainwarna);
    padding: 20px;
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
nav h1, nav h1 a{
    font-size: 28px;
    text-decoration: none;
    color: white;
}
nav h1 a:hover{
    color: black;
    transition: 0.5s;
}
nav ul{
    display: flex;
}
nav ul li{
    list-style: none;
    margin-right: 6px;
    font-weight: 500;
    
}
nav ul li a{
    text-decoration: none;
    color: white;
}
nav ul li a:hover{
    color: black;
    transition: 0.5s;
}
.container{
    background-color: white;
    padding: 50px;
    width: 40%;
    border: 1px solid var(--warna);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 22px;
}
.container h1{
    text-align: center;
    margin-bottom: 30px;
}
.container form ul li{
    list-style: none;
}
.container form ul li input{
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
}

.container form .center{
    display: flex;
    justify-content: center;
    
    
}
.container form .center button{
    width: 50%;
    margin-top: 20px;
    border: none;
    background-color: var(--mainwarna);
    padding: 10px;
    color: white;
    border-radius: 5px;
}
@media (max-width:500px){
    .container{
        width:70%;
    }
}
@media (max-width:300px){
    .container{
        background-color: var(--mainwarna);
        color: white;
        border: none;
    }
    .container form ul li .center button{
        background-color: black;
    }
}






beli.css

*{
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root{
    --warna: #65647C;
    --mainwarna: #804674;
}

html{
    scroll-behavior: smooth;
}
/* styling navbar */
nav{
    background-color: var(--mainwarna);
    padding: 20px;
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}
nav h1{
    font-size: 28px;
}
nav ul{
    display: flex;
}
nav ul li{
    list-style: none;
    margin-right: 6px;
    font-weight: 500;
    
}
nav ul li a{
    text-decoration: none;
    color: white;
}
nav ul li a:hover{
    color: black;
    transition: 0.5s;
}
.struk{
    margin-top: 75px;
    width: 45%;
    padding: 55px;
    border: 1px solid var(--warna);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    z-index: 1;
}
.struk h2{
    text-align: center;
}
.struk form ul li{
    list-style:none;
}
.struk form input{
    display: block;
    margin-bottom: 15px;
    width: 95%;
    padding: 10px;
    border-radius: 8px;
}
.struk form select {
    display: block;
    margin-bottom: 15px;
    width: 95%;
    padding: 10px;
    border-radius: 8px;
}
.struk form button{
    width: 50%;
    border: none;
    margin-top: 15px;
    padding: 10px;
    background-color: var(--mainwarna);
    color: white;
    border-radius: 8px;
}

Comments

Post a Comment

Popular posts from this blog

APLIKASI PERPUSTAKAAN DENGAN BOOTSTRAP 5, PHP DAN MYSQL

 koneksi.php <?php  $db = mysqli_connect("localhost","root","","perpus"); function query($query){     global $db;     $result = mysqli_query($db, $query);     $rows = [];     while ($row = mysqli_fetch_assoc($result)) {         $rows[] = $row;     }     return $rows; } function register($nis,$nama,$password){     global $db;     $result = mysqli_query($db, "select nis from user where nis = '$nis'");     if (mysqli_fetch_assoc($result)) {         echo "<script>         alert('NIS sudah terdaftar!')         </script>";         return false;     }     $sql = mysqli_query($db,"insert into user value('$nis','$nama','$password')");     return $sql; } function login($nis,$password){     global $db;     $sql = mysqli_query($db, "selec...
Read more

Aplikasi PKL dengan PHP

PHP koneksi.php <?php       $host = "localhost"; $username = "root"; $password = ""; $database = "pkl"; $koneksi = mysqli_connect($host,$username,$password,$database);       function register($username,$password,$nama) {         global $koneksi; $insert = mysqli_query($koneksi,"insert into user values ('$username','$password','$nama')"); return $insert; }   function login($username,$password,$remember) {         global $koneksi; $query = mysqli_query($koneksi,"select * from user where username='$username'"); $data_user = $query->fetch_array(); if(password_verify($password,$data_user['password'])) { if($remember) { setcookie('username', $username, time() + (60 * 60 * 24 * 5), '/'); setcookie('nama', $data_user['nama'], time() + (60 * 60 * 24 * 5), '/'); } $_SESSION['user...
Read more