Bisa Koding: April 2019

Counting atau disebut menghitung selalu digunakan untuk beberapa hal dari yang kecil hingga besar counting juga sering digunakan untuk Voting, Menentukan Terbesar Dan Terkecil. Dalam Blog / Website Memiliki Counting ini mungkin berupa Widget atau API dari penyedianya.

Untuk Sekarang ini kita akan membuat Counting / Voting, Yang bisa kita buat dengan menggunakan PHP, Kita langsung saja ke TKP -- Tempat Kerja Proggramer.

1. Langkah Pertama Siapkan Database Yang Akan Di Gunakan.

Nama	Tipe	Index
Id	bigint	Primary
yes	int
no	int

2. Siapkan folder untuk menyimpan project anda, bila anda memakai XAMPP, anda harus pergi ke Localdisk C >> xampp >> htdocs

3. Agar tampilannya lebih bagus dan menarik kita pakai Material Design Lite untuk Stylenya. Klik link ini untuk mendownload MDL

4. Buatlah Folder Css, Js untuk menampung file dari MDL seperti dibawah ini :

5.Buatlah Folder Database untuk menyimpang file koneksi ke mysql

6. Di dalam folder Database anda buat file connect.php

PHP <?php
    error_reporting(0);
    //Data Koneksi Ke Database
    $host = "localhost";
    $user = "root";
    $pass = "";
    $database = "count";
    //Koneksi Database
    $conn = mysqli_connect($host, $user, $pass);
    mysqli_select_db($conn, $database)or die(mysqli_error());
?>

5. Buatlah File Index.php untuk memulai tujuan kita untuk membuat vote.

HTML<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Counting Source Code</title>
    <link rel="stylesheet" href="Css/material.css"/>
    <link rel="stylesheet" href="Css/styles.css"/>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet">
</head>
<body>
    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--4-col"></div>
        <div class="mdl-cell mdl-cell--4-col center">
            <h5 class="text-center">
                Halo, Terima Kasih Sudah Datang, Silakan Klik Tombol Manapun Yang Kalian Sukai.
            </h5>
            <?php
            include_once("Database/connect.php");
            //Pengambilan Data Dari Database
            $sql = "SELECT * FROM count";
            $panggil_data = mysqli_query($conn, $sql);
            $data_count = mysqli_fetch_assoc($panggil_data);
            ?>
            <div class="mdl-grid">
                <div class="mdl-cell mdl-cell--1-col"></div>
                <div class="mdl-cell mdl-cell--10-col">
                    <span class="mdl-chip mdl-chip--contact">
                        <span class="mdl-chip__contact mdl-color--green mdl-color-text--white">Y</span>
                        <span class="mdl-chip__text"><?php echo $data_count['yes'];?></span>
                    </span>
                    <span class="mdl-chip mdl-chip--contact float-right">
                        <span class="mdl-chip__contact mdl-color--red mdl-color-text--white">N</span>
                        <span class="mdl-chip__text"><?php echo $data_count['no'];?></span>
                    </span>
                </div>
                <div class="mdl-cell mdl-cell--1-col"></div>
            </div>
            <div class="mdl-grid">
                <div class="mdl-cell mdl-cell--4-col"></div>
                <div class="mdl-cell mdl-cell--7-col">
                    <form method="get">
                        <button name="yes" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
                            <i class="material-icons">done</i> YES</button>
                        <button name="no"  class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">       
                            <i class="material-icons">report</i> NO</button>
                    </form>
                </div>
                <div class="mdl-cell mdl-cell--1-col"></div>
            </div>
            <?php
                if(isset($_GET['yes'])){
                    //Pemanggilan Data
                    $yes = $data_count['yes'] +1;
                    $update_data = mysqli_query($conn, "UPDATE count SET yes='$yes'");
                    echo '<script type="text/javascript">
                                window.location = "index.php"
                            </script>';
                }else if(isset($_GET['no'])){
                    //Pemanggilan Data
                    $no = $data_count['no'] +1;
                    $update_data = mysqli_query($conn, "UPDATE count SET no='$no'");
                    echo '<script type="text/javascript">
                                window.location = "index.php"
                            </script>';
                }
            ?>
        </div>
        <div class="mdl-cell mdl-cell--4-col"></div>
    </div>
    <script src="Js/material.js"></script>
</body>
</html>

6. Setelah itu anda bisa lansung mencobanya.

Demo :
Bisa Koding

Source Code :
Google Drive || MediaFire

Bisa Koding

Membuat Aplikasi Vote Dari PHP