Donlod source code website perhitungan suara

9:58 AM Add Comment
Assalamualaikum.

Kali ini saya ingin membagikan  web perhitungan suara yang sangat sederhana..
Sebenarnya website ini di buat waktu pemilihan caleg kemarin. bertujuan buat saksi input hasil penghitungan suara di tiap TPS.
di buat dengan seadanya jika ada yang minat codenya bisa donlod Di sini

Untuk tampilannya seperti berikut :
Untuk tampilan admin

Untuk tampilan saksi

Cukup sekian postingan kali ini semoga bermanfaat

Donload web Snoorkle Band dengan php dan mysqli

5:41 AM Add Comment
Lama tidak posting ya, pada kesempatan kali ini saya ingin membagikan website band . untuk tampilan halaman depan saya menggunan template gratisan , saya lupa lagi alamat penyedia templatenya

website ini masoh sangat sederhana namun akan cocok bagi kalian yang masih belajar kalian bisa bongkar skripnya untuk mempelajarinya  ada bebrapa fitur dalam web ini

Putar mp3
Halaman gallery
Halaman personil
Halaman jadwal tur dll

untuk tampilanya kalian bisa lihat di bawah sini

Tampilan awal

Tampilan halaman band official


Tampilan halaman tour


Tampilan halaman album


Tampilan play mp3


Mungkin sekian postingan kali ini untuk source codenya kalian bisa donlod di Di sini









Membuat Massage box atau Allert lebih hidup dengan Css

2:35 AM Add Comment

Nah kita sering lihat Massage Box atau peringatan di beberapa web Peringatan itu ada yang berbentuk pop up sederhana bawaan java script atau pun bukan .. nah kali ini kita akan berbagi atau membahas  cara membuat massage box atau allert menggunakan Css, sbenernaya ada cara gampang membuat tampilan alert lebih hidup tanpa kita perlu susah susah membuat script css yaitu dengan menggunakan bootstrap ataupun sejenisnya .

Namun kali ini kita akan  blejar cara membuat massage box agar lebih hidup dengan membuat Css Sendiri sebenarnya cara ini simple  dan  ga ribet langsung aja Lets, the code 
Langkah Pertama :
Kita buat Cssnya terlebih dahulu 
<style>
            .n_ok{
                  background: #F6FFEC;border:
                  1px solid #89B755;
                  border-radius: 3px;
                  margin: 20px 15px;
                  padding: 1px;
            }
           
            .n_ok p{
                  background: #DFF6C5 url(i_ok.png) no-repeat 4px center;
                  color: #496528;
                  margin: 0;
                  padding: 7px 25px;
            }
           
            .n_warning{
                  background: #FFF7CE;
                  border: 1px solid #D9C65B;
                  border-radius: 3px;
                  margin: 20px 15px;
                  padding: 1px;
            }
           
            .n_warning p{    
                  background: #FDF0B1 url(i_warning.png) no-repeat 4px center;     
                  color: #756B30;  
                  margin: 0;
                  padding: 7px 25px;
            }
           
            .n_error{
                  background: #FDE4E1;
                  border: 1px solid #B16A6C;
                  border-radius: 3px;
                  margin: 20px 15px;
                  padding: 1px;
            }
           
            .n_error p{
                  background: #F4CAC6 url(i_error.png) no-repeat 4px center;
                  color: #630E18;
                  margin: 0;
                  padding: 7px 25px;
            }
      </style>
Langkah Ke dua :
Kita buat code untuk menampilkan allert tersebut 
            <div class="n_ok"><p>Message box success.</p></div>
     
      <div class="n_warning"><p>Message box warning.</p></div>
     
      <div class="n_error"><p>Message box error.</p></div>
Sampai di sini sudah selesai tinggal kita coba nah untuk codenya silahkan anda download di sini mungkin sekian postingan kali ini semoga bermafaa

Membuat Progress Bar Seperti YouTube Menggunakan Plugin Jquery

2:34 AM Add Comment


Dalam posting kali  ini kita akan membuat  Progress Bar Seperti  YouTube menggunakan jquery. Mungkin anda sering nonton ataupun upload video di youtube, maka Anda sering melihat progress bar  warna merah di halaman atas YouTube saat proses loading halaman   nah  Progress Bar Seperti  YouTube yang akan coba kita implementasikan untuk kode fulny di sini



Kita langsung saja apa saja  yang di butuhkan 
1. jquery.min.js
2. jquery.transit.js
3. ytLoad.jquery.js

Setelah bahan sudah siap lalu ikuti langkah-langkah di bawah ini untuk menampilkan Progress Bar   di bagian atas halaman.

Langkah 1 :
Letakan file file jquery tadi
<link href="ytLoad.jquery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ytLoad.jquery.js"></script> >

Langkah 2 :
Sertakan skrip jquery.transit.js untuk efek transisi CSS  
<script type = "text / javascript" src = "jquery.transit.js"> </ script>

Langkah - :
Panggil fungsi jquery di bawah ini untuk menampilkan Progress Bar di bagian atas halaman.
$ (document) .ready (function () {
    $ .ytLoad ();
    // Lakukan panggilan ajax ...
    $ ('# displayAjaxContent'). load ('ajax.php');
 });

Langkah-4:
Pastekan code di bawah  untuk menampilkan data
<div id = "displayAjaxContent"> </ div>

Sampai di  sini kitas sudah  selesai dengan bagian konfigurasi. Pada dasarnya Plugin ini menampilkan Progress Bar, ketika kita  mencoba memuat halaman  .
untuk source code lengkapnya bisa anda donload di sini atau copy code di bawah
index.html
Halaman ini terdiri dari file library jquery, ajax progress bar css dan file jquery.
<!DOCTYPE html>
<html>
<head>
<title>jQuery ytLoad demo</title>
<link href="ytLoad.jquery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.transit.js"></script>
<script type="text/javascript" src="ytLoad.jquery.js"></script>
<script type="text/javascript">

 $(document).ready(function() {
    $.ytLoad();
    // Perform ajax call...
    $('#displayAjaxContent').load('ajax.php');              
 });
</script>
           
<style>
body {
margin: 0px;
padding: 0px;
background-color: #EBEBEB;
border-bottom: 1px solid #e8e8e8;
}
#displayAjaxContent {
width: 800px;
margin: auto;
margin-top: 15px;
}
</style>
</head>
<body>

<div id="displayAjaxContent"> </div>

</body>
</html>
Cukup sekian postingan kali ini semoga bermanfaat jika ada yang di tanyakan silahkan berkomentar

Membuat animasi loading berputar sederhana menggunakan css

2:29 AM Add Comment


Pada postingan kali ini kita akan buat animasi loading atau preloader berputar sederhana menggunakan css nah animasi berputar banyak di temukan di website modern, animasi loading berputar  menurut saya dapat  mempercantik web, animasi loading berputar ini tidak terlalu rumit karna kita hanya bermain dengan css saja tanpa jquery  ok langsung saja kita praktekan let,s the code
Kita hanya perlu membuat css seperti di bawah silahkan copy  
<style>
        .loader {
            -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
            border: 3px solid #ddd;
            border-top: 3px solid #42a5f5;
            border-radius: 50%;
            height: 75px;
            width: 75px;
        }
        @keyframes spin {
            to {
                border-top-color: #FF0000;
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        body {
            background-color: #f1f2f3;
        }
        .container {
            width: 200px;
            margin: 70px auto;
        }
    </style>
Lalu copy code di bawah untuk menampilkan animasi loading nya
<div class="container">
 
        <div class="loader"></div>

    </div>
untuk code lengkap nya copy code di bawah 
<html>
<head>
    <style>
        .loader {
            -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
            border: 3px solid #ddd;
            border-top: 3px solid #42a5f5;
            border-radius: 50%;
            height: 75px;
            width: 75px;
        }
        @keyframes spin {
            to {
                border-top-color: #FF0000;
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        body {
            background-color: #f1f2f3;
        }
        .container {
            width: 200px;
            margin: 70px auto;
        }
    </style>
</head>

<body>
    <div class="container">
 
        <div class="loader"></div>

    </div>
</body>

</html>
Sekian postingan kali ini semoga bermanfaat jika ada yang di tanyakan silahkan isi kolom komentar terima kasih
 

Downlad Source Code CRUD Sederhana Dengan OOP PHP Dan MySQLi

2:27 AM Add Comment

Bismillah
Ok sobat semua kesempatan kali ini kita akan coba Membuat CRUD Dengan OOP PHP Dan MySQLi Sebelum Bahas tentang crud ada baiknya kita bahas apa sih CRUD itu sendiri. CRUD adalah singkatan dari Create, Read, Update Dan Delete.nah ini berarti Crud itu terdiri dari proses input data ke dalam database, menampilkan data dari database, mengedit/mengupdate/mengubah data di database, dan juga tentunya menghapus data pada database.



Langsung aja kita ke code pertama kita buat databasenya terlebih dahulu  di sini saya kasih nama databasenya tes

-- phpMyAdmin SQL Dump
-- version 3.5.2
-- http://www.phpmyadmin.net
-- Host: localhost
-- Server version: 5.5.25a
-- PHP Version: 5.4.4

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `tes`
--

-- --------------------------------------------------------

--
-- Table structure for table `data`
--

CREATE TABLE IF NOT EXISTS `data` (
  `id` int(22) NOT NULL AUTO_INCREMENT,
  `nama` varchar(225) NOT NULL,
  `alamat` text NOT NULL,
  `telp` varchar(12) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;


-- --------------------------------------------------------


/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Setelah itu kita buat file dengan file index.php untuk halaman utamanya
<?php
include 'fungsi/fungsi.php';
$bjk = new data;
$lihat = $bjk->lihat();

?>
<!DOCTYPE html>
<html>
<head>
       
      <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>G0o-g0o</title>

    <!-- Bootstrap -->
    <link href="gaya/bootstrap.min.css" rel="stylesheet">
<link href="gaya/style.css" rel="stylesheet">
</head>
<body>
            <div class="container">
            <nav class="navbar navbar-default navnav ">
  <div class="container-fluid ">
    <div class="navbar-header navbar-brand nn">
   
        <p>G0o g0o </p>
      </a>
    </div>
  </div>
</nav>
                  <div class="row">
                    
                              <div class="col-md-8 col-md-offset-2">
                                    <table  class="table table-striped">
                                                <a  class="btn btn-warning" href="tambah.php">tambah</a>
 
  <tr><th>no</th><th>nama</th><th>alamat</th><th>telpon</th><th>aksi</th></tr>
  <?php $n = 1; foreach ($lihat as $t) {
     
  ?>
 
  <tr><td><?= $n ?></td><td><?=  $t['nama'] ?></td><td><?=  $t['alamat'] ?></td><td><?=  $t['telp'] ?></td><th><a  class="btn btn-info" href="edit.php?id=<?= $t['id']

   ?>">edit</a> <a  class="btn btn-danger" href="delet.php?id=<?= $t['id']

   ?>">delet</a> </th></tr>
<?php
 $n++;
  }
?>

</table>
                              </div>
                  </div>
            </div>
</body>
</html>
Nah kita tinggal buat file koneksi ke database dan mebuat form tambah edit dan hapus untuk file lengkapnya silahkan donlod di sini… semoga bermanfaat terimkasih

Membuat Live Chat Ala Facebook Menggunakan Php dan Jquery

5:21 AM Add Comment

Mungkin bagi kalian penggun facebook sudah tidak asing dengan tampilan chat nya facebook  yang di kenal dengan istilah live chat. Nah pada postingan kali ini yang akan bahas mengenai bagaiman sih cara buat chating online atau live chat mirip mirip facebook ini. ?



ok langsung saja kita ke code dan apa saja sih bahan yang di butuhkan
Langkah 1:
Kita butuh file jquery dan css yakni  :
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
<link type="text/css" rel="stylesheet" media="all" href="css/chat.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/screen.css" />
Langkah ke 2:
Kita buat file dengan nama tes.php copy kode di bawah
<div id="chat-sidebar">

      <div id="sidebar-user-box">
      <img src="avatar.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('Ceena')">Ceena</a></span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar2.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('nani')">nani</a> </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar3.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('nini')">nini</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar04.png" />
      <span id="slider-username"> <a href="javascript:void(0)" onclick="javascript:chatWith('maman')">maman</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar3.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('lala')">lala</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar5.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('knting')">knting</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar04.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('deni')">deni</a>  </span>
      </div>     

      <div id="sidebar-user-box">
      <img src="avatar.png" />
      <span id="slider-username"><a href="javascript:void(0)" onclick="javascript:chatWith('dadan')">dadan</a>  </span>
      </div>     

       
</div>     

Sampai di sini tahapan sudah selesai tinggal tes utnuk kode lengkap silahkan  donlod di sini
Sekian postingan kali ini semoga bermanfaat terima kasih