Berbagi Ilmu: Javascript

Sunday, 17 January 2016

Monday, 2 June 2014

AJAX CSS HTML Javascript My SQL Pemrograman PHP

Aplikasi PHP, MySQL, AJAX : Sistem Inventaris Barang

Unknown 18:49 14 Comments

Aplikasi PHP, MySQL, AJAX : Sistem Inventaris Barang

Screen Shot 1

Screen Shot 2

Screen Shot 3

Screen Shot 4

Saya kali ini akan men-share aplikasi inventaris sederhana untuk mencatat atau memanajemen barang. Aplikasi ini saya buat dengan menggunakan PHP, AJAX, dan MySQL. Mohon maaf mungkin kurang menarik, maklum baru belajar, hehehe :-)

NOTE : Aplikasi ini dibangun dengan XAMPP versi 1.8, didalamnya masih menggunakan library mysql,
jadi jika dijalankan di PHP versi 7 akan error karena sudah tidak didukung lagi (baca perubahan di PHP 7).
Jika ada error yang berhubungan dengan URL not found atau file not found, kemungkinan itu error karena HTACCESS-nya, jadi bisa googling untuk mengaktifkan mod rewrite di webserver atau baca artikel saya Mengenal HTACCESS, Tutorial HTACCESS, Tips HTACCESS.
Download di link dibawah ini
Download 1
Download 2
Download 3

Download 4

Password : 1nv3nt4r1s

Harap laporkan jika link mati :-)

Tuesday, 8 April 2014

AJAX Javascript My SQL Pemrograman PHP

Membuat Rating Menggunakan PHP, AJAX dan My SQL

Unknown 11:48 9 Comments

Halo sobat ketemu lagi di blog saya. Kali ini saya akan membehas mengenai cara membuat rating sederhana dengan menggunakan PHP, Ajax, dan My SQL. Silahkan disimak baik-baik ya . . . J

Pertama-tama kita siapkan yang kita butuhkan. Untuk rating biasanya menggunakan simbol bintang, maka sobat cari gambar bintang. Untuk gambar ini sobat cari 3 jenis, yang pertama untuk menampilkan jumlah rating, kemudian yang kedua untuk pemberian rating dan yang terakhir untuk pemberian rating ketika di-hover.

Yang kedua buat database dengan struktur tabel sebagai berikut :

CREATE DATABASE IF NOT EXISTS `aplikasi_rating`;

USE `aplikasi_rating`;

CREATE TABLE IF NOT EXISTS `rating` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`nama` varchar(50) NOT NULL,

`rating` int(11) NOT NULL,

`voter` int(11) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;

Setelah itu buat file baru di editor sobat, beri nama rating.php atau terserah sobat. Kemudian masukkan script berikut :

<html>

<head>

<script type="text/javascript">

var xmlhttp;

function buatRq(){

            if(window.ActiveXObject)

            {

                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }

            else

            {

                        xmlhttp = new XMLHttpRequest();

            }

}

function tampilKan(){

            buatRq();

            xmlhttp.onreadystatechange = tanganiIni;

            xmlhttp.open("GET","rating.php",true);

            xmlhttp.send(null);

}

function beriRating(i,j){

            xmlhttp.onreadystatechange = tanganiIni;

            xmlhttp.open("GET","rating.php?rating="+i+"&id="+j,true);

            xmlhttp.send(null);

            alert("Terima Kasih");

}

function tanganiIni(){

            if(xmlhttp.readyState == 4){

                        if(xmlhttp.status == 200){

                                    document.getElementById("hasil").innerHTML = xmlhttp.responseText;

                                    setTimeout('tampilKan()',1000);

                        }

            }

}

function diatasRating(i,x){

            var l;

            for(l=1;l<=i;l++)

            {

                        document.getElementById(x+"_"+l).src = "ratingisi.png";

            }

}

function diatasRatin(i,x){

            var l;

            for(l=1;l<=i;l++)

            {

                        document.getElementById(x+"_"+l).src = "rating.png";

            }

}

</script>

<body onload="tampilKan();">

<div id="hasil"></div>

</body>

</html>

Script diatas befungsi untuk membuat request data ke server. Sekarang kita buat file untuk menampung request datanya. Scriptnya sebagai berikut :

<style>

.ratink{

width : 335px;

border : 1px solid black;

border-radius : 10px;

margin-bottom : 10px;

padding : 10px;

box-shadow : 0 0 4px 0;

}

.berirating{

overflow : hidden;

}

.tampil_rating{

overflow : hidden;

</style>

<?php

mysql_connect("localhost","root","");

mysql_select_db("aplikasi_rating");

if(isset($_GET['rating']) && isset($_GET['id']))

{

            $rating = $_GET['rating'];

            $id       = $_GET['id'];

            mysql_query("update rating set rating = rating + ".$rating.",voter = voter + 1 where id = '".$id."'");

}

$q = mysql_query("select * from rating");

while($d=mysql_fetch_array($q))

{





            $id       = $d['id'];

            $nama = $d['nama'];

            $rating = $d['rating'];

            $voter = $d['voter'];

            if($rating == 0 || $voter == 0)

            {

                        $rate = 0;

            }

            else

            {

                        $rata = $rating/$voter;

                        $rate = round($rata);

            }



            echo "<div class='ratink'>";

            echo "<div class='tampil_rating'>";

            echo "<b>".$nama."</b> mempunyai rating : ".$rate." ";

            if($rate == 1)

            {

                        echo "<img src='rating.jpg' width='25' />";

            }

            else if($rate == 2)

            {

                        for($i=1;$i<=2;$i++)

                                    echo "<img src='rating.jpg' width='25' />";

            }

            else if($rate == 3)

            {

                        for($i=1;$i<=3;$i++)

                                    echo "<img src='rating.jpg' width='25' />";

            }

            else if($rate == 4)

            {

                        for($i=1;$i<=4;$i++)

                                    echo "<img src='rating.jpg' width='25' />";

            }

            else if($rate == 5)

            {

                        for($i=1;$i<=5;$i++)

                                    echo "<img src='rating.jpg' width='25' />";

            }

            echo "</div>";





            echo "<div class='berirating'>";

            echo "Beri rating : ";

            for($i=1;$i<=5;$i++)

            {

                        ?>

                        <img id="<?php echo $id."_".$i; ?>" src="rating.png" width="25" onmouseover="diatasRating('<?php echo $i; ?>','<?php echo $id; ?>');" onmouseout="diatasRatin('<?php echo $i; ?>','<?php echo $id; ?>');" onclick="beriRating('<?php echo $i; ?>','<?php echo $id; ?>');" />

                        <?php

            }

            echo "</div></div>";

}

?>

Script diatas digunakan untuk handler data. Beri nama file diatas rating.php. Kemudian untuk gambarnya silahkan sobat tempatkan satu folder dengan dua script diatas. Untuk menjalankannya tinggal jalankan script rating.html. Hasilnya :