Wednesday, 22 February 2017

Cara Membuat CRUD Plus Upload Gambar dengan PHP dan MySQL

Cara Membuat CRUD Plus Upload Gambar dengan PHP dan MySQL
Assalammualaikum wr.wb. Selamat malam semuanya pengunjung setia Syntax404, Saya berharap semua sehat sehat saja hehehe. Sesuai dengan judul diatas "Cara Membuat CRUD Plus Upload Gambar dengan PHP dan MySQL" saya akan sedikit share tentang judul diatas baiklah kita simak sama sama ya :)

  • Langkah pertama aktifkan webserver anda (kalau saya memakai Xampp) bagi kalian yang mau Xampp bisa Downloaod Disini 
  • Kemudian buat lah folder "crud" di C:\xampp\htdocs dan buat lagi folder images di C:\xampp\htdocs\crud
  • Buatlah database "crudsyntax" tabel nya bisa anda Download Disini! 
Setelah semua selesai dilakukan yang diatas mari kita masuk ke codingan nya simak baik baik

 Buatlah file koneksi.php
    <?php
    $host = "localhost"; // Nama hostnya
    $username = "root"; // Username
    $password = ""; // Password (Isi jika menggunakan password)
    $database = "crudsyntax"; // Nama databasenya
    $connect = mysqli_connect($host, $username, $password, $database); // Koneksi ke MySQL
    ?>
Buatlah file index.php
<html>
<head>
  <title>Aplikasi CRUD Plus Upload Gambar dengan PHP</title>
</head>
<body>
  <h1>Data Siswa</h1>
  <a href="form_simpan.php">Tambah Data</a><br><br>
  <table border="1" width="100%">
  <tr>
    <th>Foto</th>
    <th>NIS</th>
    <th>Nama</th>
    <th>Jenis Kelamin</th>
    <th>Telepon</th>
    <th>Alamat</th>
    <th colspan="2">Aksi</th>
  </tr>
  <?php
  // Load file koneksi.php
  include "koneksi.php";
 
  $query = "SELECT * FROM siswa"; // Query untuk menampilkan semua data siswa
  $sql = mysqli_query($connect, $query); // Eksekusi/Jalankan query dari variabel $query
 
  while($data = mysqli_fetch_array($sql)){ // Ambil semua data dari hasil eksekusi $sql
    echo "<tr>";
    echo "<td><img src='images/".$data['foto']."' width='100' height='100'></td>";
    echo "<td>".$data['nis']."</td>";
    echo "<td>".$data['nama']."</td>";
    echo "<td>".$data['jenis_kelamin']."</td>";
    echo "<td>".$data['telp']."</td>";
    echo "<td>".$data['alamat']."</td>";
    echo "<td><a href='form_ubah.php?nis=".$data['nis']."'>Ubah</a></td>";
    echo "<td><a href='proses_hapus.php?nis=".$data['nis']."'>Hapus</a></td>";
    echo "</tr>";
  }
  ?>
  </table>
</body>
</html>

Buatlah file form_simpan.php
<html>
<head>
  <title>Aplikasi CRUD dengan PHP</title>
</head>
<body>
  <h1>Tambah Data Siswa</h1>
  <form method="post" action="proses_simpan.php" enctype="multipart/form-data">
  <table cellpadding="8">
  <tr>
    <td>NIS</td>
    <td><input type="text" name="nis"></td>
  </tr>
  <tr>
    <td>Nama</td>
    <td><input type="text" name="nama"></td>
  </tr>
  <tr>
    <td>Jenis Kelamin</td>
    <td>
    <input type="radio" name="jenis_kelamin" value="Laki-laki"> Laki-laki
    <input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
    </td>
  </tr>
  <tr>
    <td>Telepon</td>
    <td><input type="text" name="telp"></td>
  </tr>
  <tr>
    <td>Alamat</td>
    <td><textarea name="alamat"></textarea></td>
  </tr>
  <tr>
    <td>Foto</td>
    <td><input type="file" name="foto"></td>
  </tr>
  </table>
 
  <hr>
  <input type="submit" value="Simpan">
  <a href="index.php"><input type="button" value="Batal"></a>
  </form>
</body>
</html>

Buatlah file form_ubah.php
<html>
<head>
  <title>Aplikasi CRUD dengan PHP</title>
</head>
<body>
  <h1>Ubah Data Siswa</h1>
 
  <?php
  // Load file koneksi.php
  include "koneksi.php";
 
  // Ambil data NIS yang dikirim oleh index.php melalui URL
  $nis = $_GET['nis'];
 
  // Query untuk menampilkan data siswa berdasarkan NIS yang dikirim
  $query = "SELECT * FROM siswa WHERE nis='".$nis."'";
  $sql = mysqli_query($connect, $query);  // Eksekusi/Jalankan query dari variabel $query
  $data = mysqli_fetch_array($sql); // Ambil data dari hasil eksekusi $sql
  ?>
 
  <form method="post" action="proses_ubah.php?nis=<?php echo $nis; ?>" enctype="multipart/form-data">
  <table cellpadding="8">
  <tr>
    <td>Nama</td>
    <td><input type="text" name="nama" value="<?php echo $data['nama']; ?>"></td>
  </tr>
  <tr>
    <td>Jenis Kelamin</td>
    <td>
    <?php
    if($data['jenis_kelamin'] == "Laki-laki"){
      echo "<input type='radio' name='jenis_kelamin' value='laki-laki' checked='checked'> Laki-laki";
      echo "<input type='radio' name='jenis_kelamin' value='perempuan'> Perempuan";
    }else{
      echo "<input type='radio' name='jenis_kelamin' value='laki-laki'> Laki-laki";
      echo "<input type='radio' name='jenis_kelamin' value='perempuan' checked='checked'> Perempuan";
    }
    ?>
    </td>
  </tr>
  <tr>
    <td>Telepon</td>
    <td><input type="text" name="telp" value="<?php echo $data['telp']; ?>"></td>
  </tr>
  <tr>
    <td>Alamat</td>
    <td><textarea name="alamat"><?php echo $data['alamat']; ?></textarea></td>
  </tr>
  <tr>
    <td>Foto</td>
    <td>
      <input type="checkbox" name="ubah_foto" value="true"> Ceklis jika ingin mengubah foto<br>
      <input type="file" name="foto">
    </td>
  </tr>
  </table>
 
  <hr>
  <input type="submit" value="Ubah">
  <a href="index.php"><input type="button" value="Batal"></a>
  </form>
</body>
</html>

Buatlah file proses_hapus.php
<?php
// Load file koneksi.php
include "koneksi.php";

// Ambil data NIS yang dikirim oleh index.php melalui URL
$nis = $_GET['nis'];

// Query untuk menampilkan data siswa berdasarkan NIS yang dikirim
$query = "SELECT * FROM siswa WHERE nis='".$nis."'";
$sql = mysqli_query($connect, $query); // Eksekusi/Jalankan query dari variabel $query
$data = mysqli_fetch_array($sql); // Ambil data dari hasil eksekusi $sql

// Hapus foto yang telah diupload dari folder images
unlink("images/".$data['foto']);

// Query untuk menghapus data siswa berdasarkan NIS yang dikirim
$query2 = "DELETE FROM siswa WHERE nis='".$nis."'";
$sql2 = mysqli_query($connect, $query2); // Eksekusi/Jalankan query dari variabel $query

if($sql2){ // Cek jika proses simpan ke database sukses atau tidak
  // Jika Sukses, Lakukan :
  header("location: index.php"); // Redirect ke halaman index.php
}else{
  // Jika Gagal, Lakukan :
  echo "Data gagal dihapus. <a href='index.php'>Kembali</a>";
}
?>

Buatlah file proses_simpan.php
<?php
// Load file koneksi.php
include "koneksi.php";

// Ambil Data yang Dikirim dari Form
$nis = $_POST['nis'];
$nama = $_POST['nama'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];
$foto = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];

// Set path folder tempat menyimpan fotonya
$path = "images/".$foto;

// Proses upload
if(move_uploaded_file($tmp, $path)){ // Cek apakah gambar berhasil diupload atau tidak
  // Proses simpan ke Database
  $query = "INSERT INTO siswa VALUES('".$nis."', '".$nama."', '".$jenis_kelamin."', '".$telp."', '".$alamat."', '".$foto."')";
  $sql = mysqli_query($connect, $query); // Eksekusi/ Jalankan query dari variabel $query

  if($sql){ // Cek jika proses simpan ke database sukses atau tidak
    // Jika Sukses, Lakukan :
    header("location: index.php"); // Redirect ke halaman index.php
  }else{
    // Jika Gagal, Lakukan :
    echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";
    echo "<br><a href='form_simpan.php'>Kembali Ke Form</a>";
  }
}else{
  // Jika gambar gagal diupload, Lakukan :
  echo "Maaf, Gambar gagal untuk diupload.";
  echo "<br><a href='form_simpan.php'>Kembali Ke Form</a>";
}
?>


Buatlah file proses_ubah.php
<?php
// Load file koneksi.php
include "koneksi.php";

// Ambil data NIS yang dikirim oleh form_ubah.php melalui URL
$nis = $_GET['nis'];

// Ambil Data yang Dikirim dari Form
$nama = $_POST['nama'];
$jenis_kelamin = $_POST['jenis_kelamin'];
$telp = $_POST['telp'];
$alamat = $_POST['alamat'];

// Cek apakah user ingin mengubah fotonya atau tidak
if(isset($_POST['ubah_foto'])){ // Jika user menceklis checkbox yang ada di form ubah, lakukan :
  // Ambil data foto yang dipilih dari form
  $foto = $_FILES['foto']['name'];
  $tmp = $_FILES['foto']['tmp_name'];

  // Set path folder tempat menyimpan fotonya
  $path = "images/".$foto;

  // Proses upload
  if(move_uploaded_file($tmp, $path)){ // Cek apakah gambar berhasil diupload atau tidak
    // Query untuk menampilkan data siswa berdasarkan NIS yang dikirim
    $query = "SELECT * FROM siswa WHERE nis='".$nis."'";
    $sql = mysqli_query($connect, $query); // Eksekusi/Jalankan query dari variabel $query
    $data = mysqli_fetch_array($sql); // Ambil data dari hasil eksekusi $sql

    // Hapus file foto sebelumnya yang ada di folder images
    unlink("images/".$data['foto']);
  
    // Proses ubah data ke Database
    $query = "UPDATE siswa SET nama='".$nama."', jenis_kelamin='".$jenis_kelamin."', telp='".$telp."', alamat='".$alamat."', foto='".$foto."' WHERE nis='".$nis."'";
    $sql = mysqli_query($connect, $query); // Eksekusi/ Jalankan query dari variabel $query

    if($sql){ // Cek jika proses simpan ke database sukses atau tidak
      // Jika Sukses, Lakukan :
      header("location: index.php"); // Redirect ke halaman index.php
    }else{
      // Jika Gagal, Lakukan :
      echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";
      echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
    }
  }else{
    // Jika gambar gagal diupload, Lakukan :
    echo "Maaf, Gambar gagal untuk diupload.";
    echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
  }
}else{ // Jika user tidak menceklis checkbox yang ada di form ubah, lakukan :
  // Proses ubah data ke Database
  $query = "UPDATE siswa SET nama='".$nama."', jenis_kelamin='".$jenis_kelamin."', telp='".$telp."', alamat='".$alamat."' WHERE nis='".$nis."'";
  $sql = mysqli_query($connect, $query); // Eksekusi/ Jalankan query dari variabel $query

  if($sql){ // Cek jika proses simpan ke database sukses atau tidak
    // Jika Sukses, Lakukan :
    header("location: index.php"); // Redirect ke halaman index.php
  }else{
    // Jika Gagal, Lakukan :
    echo "Maaf, Terjadi kesalahan saat mencoba untuk menyimpan data ke database.";
    echo "<br><a href='form_ubah.php'>Kembali Ke Form</a>";
  }
}
?>

Setelah semuanya sudah di ketik coding diatas tadi jika berhasil maka akan muncul seperti gambar dibawah ini:
Hasil Jadi
Bagi kalian yang gagal jangan khawatir admin menyediakan link downloadnya Download Disini! (password: syntax404.tk)

Sekian dari artikel tentang "Cara Membuat CRUD Plus Upload Gambar dengan PHP dan MySQL" jangan lupa di share dan comment dibawah ya dan semoga bermanfaat artikel nya :) Salam sukses bagi kita semua :)
Read more

Sunday, 8 January 2017

Pembuatan Program Kasir Rumah Makan Dengan C++

Assalammualaikum wr.wb.
Selamat malam semuanya pengunjung setia Syntax404, Saya berharap semua sehat sehat saja hehehe.
Sesuai dengan judul diatas "Pembuatan Program Kasir Rumah Makan Dengan C++" saya akan sedikit share tentang judul diatas baiklah kita simak sama sama ya :) .

Dari pengalaman saya sehari hari  melihat hari demi hari teknologi semakin modren, saya semakin berinisiatif untuk membuat program kasir rumah makan walaupun hanya menggunakan platform DEV-C++.
Program Kasir

Yak langsung saja kita masuk ke judul diatas ya, simak baik baik semoga aja berhasil :) .
  1. Buka program Dev-C++ anda versi berapapun tidak masalah, kalau saya menggunakan versi 4.9.9.2 karna compatible menurut saya sih :D kalau anda mau bisa Download Disini!!!
  2. Setelah dibuka program Dev-C++ nya klik tab File->New->Source File.
  3. Kemudian copy kan source code dibawah ini:
  4. #include<iostream>
    #include <windows.h>
    using namespace std;
    int main (){
        int kode,pri,jml,tot,byr,kbl;
        char mad;
        do
        {
           system("color F2");
        cout<<"\t\t        Selamat Datang Di"<<endl;
        cout<<"\t\t      Warung Lezat Enak Medan"<<endl;
        cout<<"\t\t         Jl. syntax404.tk"<<endl;
        cout<<"\t\t================================="<<endl;
        cout<<""<<endl;
        cout<<"*---*-------------------------*------------*"<<endl;
        cout<<"|No | Menu Makanan Dan Minuman|    Harga   |"<<endl;
        cout<<"====*=========================*============*"<<endl;
        cout<<"|1. | AYAM GORENG + NASI      | Rp. 13.000 |"<<endl;
        cout<<"|2. | NASI GORENG             | Rp. 10.000 |"<<endl;
        cout<<"|3. | MIE KUAH                | Rp. 10.000 |"<<endl;
        cout<<"|4. | MIE GORENG              | Rp. 10.000 |"<<endl;
        cout<<"|5. | TST                     | Rp.  8.000 |"<<endl;
        cout<<"|6. | JUS JERUK               | Rp.  7.000 |"<<endl;
        cout<<"|7. | TEH MANIS DINGIN/PANAS  | Rp.  7.000 |"<<endl;
        cout<<"|8. | JUS MANGGA              | Rp.  7.000 |"<<endl;
        cout<<"|9. | JUS LEMON               | Rp.  7.000 |"<<endl;
        cout<<"|10.| JUS TERONG BELANDA      | Rp.  7.000 |"<<endl;
        cout<<"|11.| ES KOSONG               | Rp.  1.000 |"<<endl;
        cout<<"*---*-------------------------*------------*"<<endl;
        cout<<'\n'<<"Masukkan Menu Makanan (Nomor) :";
        cin>>kode;
        switch (kode){
    /*============================================
    // PROGRAM KASIR SEDERHANA                   ||
    // AUTHOR BY: M. IQBAL YAZI                
    // JANGAN LUPA BERKUNJUNG KE www.syntax404.tk
    // MAAF JIKA ADA KESALAHAN DARI PROGRAM
    INI KARNA AUTHOR ADALAH SEORANG NEWBIEW       ||
    ==============================================*/

       case 1:
            cout<<'\n'<<"AYAM GORENG + NASI"<<endl;
            pri=13000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"Dibayar : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"Total Kembalian : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 2:
            cout<<'\n'<<"NASI GORENG"<<endl;
                pri=10000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 3:
            cout<<'\n'<<"MIE KUAH"<<endl;
                pri=10000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 4:
            cout<<'\n'<<"MIE GORENG"<<endl;
                pri=10000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 5:
            cout<<'\n'<<"TST"<<endl;
                pri=8000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 6:
            cout<<'\n'<<"JUS JERUK"<<endl;
                pri=7000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 7:
            cout<<'\n'<<"TEH MANIS DINGIN/PANAS"<<endl;
                pri=7000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 8:
            cout<<'\n'<<"JUS MANGGA"<<endl;
                pri=7000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 9:
            cout<<'\n'<<"JUS LEMON"<<endl;
                pri=7000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 10:
            cout<<'\n'<<"JUS TERONG BELANDA"<<endl;
                pri=7000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        case 11:
            cout<<'\n'<<"ES KOSONG"<<endl;
                pri=1000;
            cout<<"Masukkan Jumlah Pesanan :";
            cin>>jml;
                tot=pri*jml;
            cout<<"Total harganya yaitu : Rp. "<<tot<<endl;
            cout<<"DIBAYAR : Rp. ";
            cin>>byr;
                kbl=byr-tot;
            cout<<"KEMBALI : Rp. "<<kbl<<endl;
            cout<<"Masih ada yang Lain Jika Ada Tekan Y, Jika Tidak Tekan N ? :";
            cin>>mad;
            break;
        default:
        cout<<"Maaf! Kode yang anda masukkan tidak ada";
        }
        }
        while (mad/='Y');
        cout<<"Terimah Kasih Atas Kunjungan Anda di syntax404.tk";
        return 0;
    }
Setelah sudah di copas tekan F9 pada keyboad anda simpan dengan nama ATM, kalau berhasil seperti gambar dibawah ini:
 Jika anda mauf file yang sudah jadi bisa anda download Dsini!!! password rar: "syntax404.tk" (Tanpa tanda kutip).

Sekian tutorial dari saya semoga bermanfaat ya buat anda terutama pengunjung setia syntax404.tk, Saya ucapkan terimakasih buat yang sudah membaca dan mengikuti blog saya ini Assalammualaikum wr.wb, jangan lupa share, bookmark, dan comment dibawah ya :) sampai jumpa lagi di tutorail yang akan datang slalu tunggu ya update artikel menarik nya :)
Read more

Wednesday, 4 January 2017

Cara Membuat Program Mesin ATM Sederhana Dengan C++

Assalammualaikum wr.wb.
Selamat malam semuanya pengunjung setia Syntax404, Saya berharap semua sehat sehat saja hehehe.
Sesuai dengan judul diatas "Cara Membuat Program Mesin ATM Sederhana Dengan C++" saya akan sedikit share tentang judul diatas baiklah kita simak sama sama ya :) .



Melihat screenshot diatas kayaknya tertarik kan hehehehe :D selow selow (kata anak sekarang) sebelum ke inti permasalahan nya coba cek dulu postingan yang lama tentang program C++ Cara membuat Program tiket Kereta Api dengan C++ 

Program ini adalah program ATM sederhana dengan menu cek saldo, tarik tunai, dan transfer, dan saya memakai header cuma 2 yaitu:
  1. #include<windows.h>
  2. #include <iostream>
 Yuk langsung saja kita praktekkan bersama lihat dan cermati script nya ya kawan :)
  • Buka c++ nya kemudian klik tab file->new->source file (jika anda tidak ada Dev-C++ nya Download Disini!!!
  • setelah itu copy script dibawah ini:

  •  // PROGRAM ATM SEDERHANA
     // SALDO UTAMA Rp5.000.000
     // PIN ANDA SAAT INI: 7777
    #include<windows.h>
    #include <iostream>
    using namespace std;
    long nSaldo = 5000000;  //global variabel


    int transaksi(int a, int b) //function utk menu tarik tunai
    {
        nSaldo= a-b;
        cout<<endl;
        cout<<"Transaksi berhasil !"<<endl<<endl;
        cout<<"Jumlah saldo anda saat ini adalah : Rp. "<<nSaldo<<endl<<endl;
        cout<<"1. Kembali"<<endl;
        cout<<"2. Keluar"<<endl<<endl;
         } //akhir function

    int main()
    {
        char cNama[50];
        int nPin, nTransfer;
        int nPil[7];
        char chRek[5];
     
        awal:
        system("cls");
               system("color 17");
        cout<<"SELAMAT DATANG DI ATM KITA KITA"<<endl<<endl;
        cout<<"Masukan PIN anda : "; cin>>nPin;
     
        if (nPin == 7777) //====>>> Ini adalah pin anda
        {
              
                 system("cls");
                 cout<<"\t \t \t \t===ATM KITA KITA==="<<endl<<endl;
                 cout<<"1. Cek Saldo"<<endl;
                 cout<<"2. Tarik Tunai"<<endl;
                 cout<<"3. Transfer"<<endl<<endl;
                 cout<<"Pilih menu : "; cin>>nPil[0];cout<<endl;
              
              
                 switch (nPil[0])    //Switch to case menu
                 {
                        case 1:      //Case menu 1
                             cout<<"Jumlah saldo anda saat ini adalah : Rp. "<<nSaldo<<endl<<endl;
                             cout<<"1. Kembali"<<endl;
                             cout<<"2. Keluar"<<endl<<endl;
                             cout<<"Pilih : "; cin>>nPil[2];
                             if (nPil[2] == 1)
                             {
                                         goto awal;
                                         }
                                         {
                                              break;
                                              }
                     
                        case 2:      //Case menu 2
                             cout<<"\t *_------------------_*"<<endl;
                             cout<<"\t || Menu Tarik Tunai ||"<<endl;
                             cout<<"\t *--------------------*"<<endl;
                             cout<<"\t | 1. |Rp. 50.000     |"<<endl;
                             cout<<"\t | 2. |Rp. 100.000    |"<<endl;
                             cout<<"\t | 3. |Rp. 200.000    |"<<endl;   
                             cout<<"\t | 4. |Rp. 500.000    |"<<endl;   
                             cout<<"\t | 5. |Rp. 1.000.000  |"<<endl;
                             cout<<"\t | 6. |Rp. 1.500.000  |"<<endl;
                             cout<<"\t | 7. |Rp. 2.000.000  |"<<endl;   
                             cout<<"\t | 8. |Rp. 3.000.000  |"<<endl;
                             cout<<"\t | 9. |Rp. 5.000.000  |"<<endl;
                             cout<<"\t *--------------------*"<<endl<<endl;
                             cout<<"Pilih : ";cin>>nPil[3];
                             switch (nPil[3]) //Sub case menu 2
                             {
                                    case 1:  //sub case menu 2 - 1
                                      
                                         transaksi(nSaldo, 100000);
                                         cout<<"Pilih : ";cin>>nPil[4];
                                         if (nPil[4] == 1)
                                         {
                                                     goto awal;
                                                     }
                                                     {
                                                          goto akhir;;
                                                          }
                                              
                                              
                                    case 2:  //sub case menu 2 - 2
                                      
                                         transaksi(nSaldo, 200000);
                                         cout<<"Pilih : ";cin>>nPil[4];
                                         if (nPil[4] == 1)
                                         {
                                                     goto awal;
                                                     }
                                                     {
                                                          goto akhir;;
                                                          }
                                 
                                    case 3:  //sub case menu 2 - 3
                                      
                                         transaksi(nSaldo, 500000);
                                         cout<<"Pilih : ";cin>>nPil[4];
                                         if (nPil[4] == 1)
                                         {
                                                     goto awal;
                                                     }
                                                     {
                                                          goto akhir;
                                                          }
                                                       
                                    case 4:  //sub case menu 2 - 4
                                      
                                         transaksi(nSaldo, 1000000);
                                         cout<<"Pilih : ";cin>>nPil[4];
                                         if (nPil[4] == 1)
                                         {
                                                     goto awal;
                                                     }
                                                     {
                                                          goto akhir;
                                                          }
                                                       
                                    case 5:  //sub case menu 2 - 5
                                      
                                         transaksi(nSaldo, 1500000);
                                         cout<<"Pilih : ";cin>>nPil[4];
                                         if (nPil[4] == 1)
                                         {
                                                     goto awal;
                                                     }
                                                     {
                                                          goto akhir;
                                                          }
                                                       
                                    case 6:  //sub case menu 2 - 6
                                      
                                         transaksi(nSaldo, 2000000);
                                         cout<<"Pilih : ";cin>>nPil[4];
                                         if (nPil[4] == 1)
                                         {
                                                     goto awal;
                                                     }
                                                     {
                                                          goto akhir;
                                                          }
                                                       
                                    case 7:  //sub case menu 2 - 7
                                      
                                         transaksi(nSaldo, 3000000);
                                         cout<<"Pilih : ";cin>>nPil[4];
                                         if (nPil[4] == 1)
                                         {
                                                     goto awal;
                                                     }
                                                     {
                                                          goto akhir;
                                                          }
                                                       
                                    case 8:  //sub case menu 2 - 8
                                      
                                         transaksi(nSaldo, 5000000);
                                         cout<<"Pilih : ";cin>>nPil[4];
                                         if (nPil[4] == 1)
                                         {
                                                     goto awal;
                                                     }
                                                     {
                                                          goto akhir;
                                                          }
                                                       
                                                          }//Akhir sub case menu 2    
                                 
                     
                        case 3:     //Case menu 3
                          
                             ulang:
                             cout<<"Masukan nomor rekening (Max 5 digit): "; cin>>chRek;
                             cout<<"Masukan jumlah transfer      \t    : "; cin>>nTransfer; cout<<endl<<endl;
                             cout<<"Nomor rekening  : "<<chRek<<"\nJumlah transfer : "<<nTransfer<<endl<<endl;
                             cout<<"1. Transfer"<<endl;
                             cout<<"2. Ulangi"<<endl<<endl;
                             cout<<"Pilih : "; cin>>nPil[5];
                             if (nPil[5] == 1)
                             {
                                         cout<<endl;
                                         nSaldo = nSaldo - nTransfer;
                                         cout<<"Transaksi berhasil !"<<endl;
                                         cout<<"Jumlah saldo anda saat ini adalah : Rp. "<<nSaldo<<endl<<endl;
                                         cout<<"1. Kembali"<<endl;
                                         cout<<"2. Keluar"<<endl<<endl;
                                         cout<<"Pilih : "; cin>>nPil[6];
                                         if (nPil[6] == 1)
                                         {
                                                     goto awal;
                                                     }
                                                     {
                                                          break;
                                                          }
                                                          }
                                                          {
                                                                cout<<endl;
                                                                goto ulang;
                                                                }
                          
                          
                             } //Akhir case menu
                             }
                             {
                              cout<<"PIN anda salah !"<<endl<<endl;
                              cout<<"1. Kembali"<<endl;
                              cout<<"2. Keluar"<<endl<<endl;
                              cout<<"Pilih : "; cin>>nPil[1];
                              if(nPil[1] == 1)
                              {
                                         goto awal;
                                         }
                                         {
                                              goto akhir;
                                              }
                                              }
                                                             
                           
    akhir:              
    system("PAUSE");
    return 0;
     
    }
Setelah sudah di copas tekan F9 pada keyboad anda simpan dengan nama ATM, kalau berhasil seperti gambar dibawah ini:
Jika anda mauf file yang sudah jadi bisa anda download Dsini!!! password rar: "syntax404.tk" (Tanpa tanda kutip)
  • Catatan untuk program ATM
    PIN: 7777
Sekian tutorial dari saya semoga bermanfaat ya buat anda terutama pengunjung setia syntax404.tk, Saya ucapkan terimakasih buat yang sudah membaca dan mengikuti blog saya ini Assalammualaikum wr.wb, jangan lupa share, bookmark, dan comment dibawah ya :) sampai jumpa lagi di tutorail yang akan datang slalu tunggu ya update artikel menarik nya :)
Read more

Thursday, 29 December 2016

Cara Membuat Aplikasi Chat Room Sederhana Dengan bootstrap

Assalammualaikum wr.wb.
Selamat malam semuanya pengunjung setia Syntax404, Saya berharap semua sehat sehat saja hehehe.
Sesuai dengan judul diatas "Cara Membuat Aplikasi Chat Room Sederhana Dengan bootstrap" saya akan sedikit share tentang judul diatas baiklah kita simak sama sama ya :) .

  • Pertama-tama download file pendukungnya (Wajib)!!! Disini password: syntax.tk
  •  Setelah itu buat file koneksi.php
    ini scriptnya:

    <?php
    try{
        $koneksi=new PDO('mysql:host=localhost;dbname=nge_chat','root','');  
    }catch(PDOException $e){
        echo "Koneksi Database gagal ".$e->getMessage();
        exit;
    }
    ?>
  • Kemudian buat file index.php
    ini scriptnya:
    <?php
    session_start();
    error_reporting(E_ALL);
    include "koneksi.php";
    if(empty($_SESSION['nick']))
    {
        if(isset($_COOKIE['nick']))
        {
            $_SESSION['nick']=$_COOKIE['nick'];
            header("location:".$_SERVER['PHP_SELF']);
        }
        else
        {
            belum_login();
        }
    }
    else
    {
        sudah_login();
    }
    function belum_login(){
    ?>
    <!doctype html>
    <html lang="en">
    <meta charset="utf-8">
    <head>
    <title> Selamat Datang Di Aplikasi Chat Room </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="style_sebelum.css" rel="stylesheet">
    <script src="bootstrap/js/jQuery.js"></script>
    <script src="ajaxku.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    </head>
    <body>
    <!-- CONTAINER -->
    <div class="container">
        <div class="row">
            <div class="span4 offset4">
                <h1 class="text-center text-info"> Aplikasi Chat Sederhana </h1>
                <p class="text-info text-center">Selamat Datang di Aplikasi Chat Sederhana</p>
            </div>
        </div>
        <div class="row">
            <div class="span4 offset4">
                <img src="chat-syntax404.tk.png" class="img-circle">
            </div>
        </div>
        </br>
        <div class="row">
            <div class="span4 offset4">
                <button href="#modalmasuk" class="btn btn-primary btn-block btn-large" data-toggle="modal" type="button"><i class="icon-share-alt icon-white"></i> Masuk</button>
                <button href="#modaldaftar" class="btn btn-primary btn-large btn-block" data-toggle="modal" type="button"><i class="icon-user icon-white"></i> Daftar</button>
            <p class="text-center text-danger" > Copyright 2016 syntax404.tk || jagocoding.com </p>
            </div>
        </div>
    <!-- MODAL -->
    <div id="modalmasuk" class="modal hide fade">
                <div class="modal-header">
                <h3> Masuk Nge_Chat</h3>
                </div>
                <div class="modal-body">
                <!-- modal form login -->
                <form class="form-horizontal" id="formmasuk" method="post" action="">
                    <div class="control-group">
                        <label class="control-label" for="inputEmail">Nickname</label>
                        <div class="controls">
                        <input type="text" id="nick" placeholder="Nickname" required x-moz-errormessage='Form harus diisi 5-10 Karakter !'  pattern="[a-zA-Z]{5,10}"  >
                        </div>
                    </div>
                    <div class="control-group">
                    <label class="control-label" for="inputPassword" >Password</label>
                        <div class="controls">
                        <input type="password" id="pass" placeholder="Password" required x-moz-errormessage='Form harus diisi 5-10 Karakter !'  pattern=".{5,10}"  >
                        </div>
                    </div>
                    <div class="control-group">
                    <div class="controls">
                    <label class="checkbox">
                        <input type="checkbox" id="cokie" value="ingataku"> Ingat Saya Dalam 1 Jam !
                    </label>
                    </div>
                    </div>
                    <div class="control-group">
                        <div class="controls">
                        <button type="submit" class="btn" id="masuk">Masuk</button>
                        <button type="submit" class="btn btn-danger"  data-dismiss="modal">Tutup</button>
                        </div>
                    </div>
                </form>
                    <p id="notif"></p>
                </div>
                <div class="modal-footer">
                </div>
    </div>
    <div id="modaldaftar" class="modal hide fade">
            <div class="modal-header">
                <h3> Daftar Nge_Chat</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="formdaftar">
                <div class="control-group">
                    <label class="control-label">Nickname</label>
                    <div class="controls">
                        <input type="text" id="dnick" placeholder="Nickname"  required x-moz-errormessage='Form harus diisi 5-10 Karakter !'  pattern="[a-zA-Z]{5,10}">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" >Email</label>
                    <div class="controls">
                        <input type="email" id="email" placeholder="Email" required required x-moz-errormessage='Email tidak valid !'>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Password</label>
                    <div class="controls">
                    <input type="password" id="dpass" placeholder="Password" required required x-moz-errormessage='Form harus diisi 5-10 Karakter !'  pattern=".{5,10}">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button type="submit" class="btn" id="daftar">Daftar</button>
                        <button type="submit" class="btn btn-danger"  data-dismiss="modal">Tutup</button>
                    </div>
                </div>
                </form>
                <p id="dnotif"></p>
            </div>
            <div class="modal-footer">
            </div>
    </div>
    <!-- END MODAL -->
    </div>
    </html>
    <?php }
    function sudah_login(){
    ?>
    <!doctype html>
    <html lang="en">
    <head>
    <title>Aplikasi Room Chat Sederhana</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="style_sesudah.css" rel="stylesheet">
    <script src="bootstrap/js/jQuery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="ajaxku.js"></script>

    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="span6 offset2">
                <h1 class="text-info pull-left"> Room Chat </h1>
            </div>
            <div class="span2">
                <a href="logout.php" class="btn btn-danger"  type="button" ><i class="icon-off icon-white"></i> Keluar </a>
            </div>
        </div>
        <div class="row">
            <div class="span6 offset2">
                    <div id="boxpesan">
                    </div>
            </div>
            <div class="span2">
                    <div class="boxonline">
                    </div>
            </div>
        </div>
        </br>
        <div class="row">
            <div class="span6 offset2">
                <form method="post" action="" id="formpesan" class="form-inline">
                <input class="input-xlarge" name="pesan" type="text" placeholder="Ketik Pesan kemudian Enter !" required x-moz-errormessage="Ketik pesannya gan !">
                <input type='submit' value='Kirim' class='btn btn-info pull-right' id='pencet'>
                </form>
            <audio controls id="suara">
            <source src="../Nge_Chat/chat.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
            </audio>
            </div>
            <div class="span2">
                <a href="#" class="btn btn-info" data-toggle="popover"  id="emot" type="button" data-placement="top" title="Emoticons (klik)">
                <i class="icon-eye-open icon-white"></i> Emoticons </a>
            </div>
        </div>
    </div>
    </body>
    </html>
    <?php 
    }
  • Kemudian buat file login.php
    ini scriptnya:

    <?php
    session_start();
    include "koneksi.php";
    $nick=trim($_POST['nick']);
    $pass=md5(trim($_POST['pass']));

    $cari=$koneksi->prepare("select * from user where nick=:nick and pass=:pass ");
    $cari->BindParam(":nick",$nick);
    $cari->BindParam(":pass",$pass);
    $cari->execute();
    if($cari->rowCount()==0)
    {
    echo "failed";
    }
    else
    {
    $_SESSION['nick']=$nick;
    $waktu=date("h:m:s");
    $online=$koneksi->prepare("insert into online (nick,waktu) values (:nick,:waktu)");
    $online->BindParam(":nick",$nick);
    $online->BindParam(":waktu",$waktu);
    $online->execute();
    if(isset($_POST['cokie']))
    {
        if($_POST['cokie']=="ingataku")
        {
        setcookie("nick",$nick, time()+3600);
        }
    }
    echo "ok";
    }
    ?>
  • Kemudian buat file logout.php
    ini scriptnya:

    <?php
    session_start();
    include "koneksi.php";
    if(isset($_SESSION['nick']))
    {
    $nick=$_SESSION['nick'];
    $hapus=$koneksi->prepare("delete from online where nick=:nick");
    $hapus->BindParam(":nick",$nick);
    $hapus->execute();
    unset($_SESSION['nick']);
    if(isset($_COOKIE['nick']))
    {
        setcookie("nick","",time()-3600);
    }
    header("location:index.php");
    }
    ?>
  • Kemudian buat file ambil.php
    ini scriptnya:

    <?php
    include "koneksi.php";
    $ambil=$koneksi->prepare("select * from pesan order by id");
    $ambil->execute();
    while($ulangi=$ambil->fetch())
    {
        // this is emoticon's operation bro
        $text_awal=$ulangi['pesan'];
        $symbol=array("[kasmaran]","[kedip]","[ketawa]","[marah]","[melet]","[nangis]",
                    "[sakit]","[bye]","[maki-maki]","[cmarah]","[cmurung]","[cnangis]",
                    "[csedih]","[csenyum]","[bonus]");
                  
        $icon=array("<img src='../nge_chat//emot/akasmaran.gif' title='handup'>",
                "<img src='../nge_chat/emot/akedip.gif' title='bingung'>",
                "<img src='../nge_chat/emot/aketawa.gif' title='capek'>",
                "<img src='../nge_chat/emot/amarah.gif' title='cemen'>",
                "<img src='../nge_chat/emot/amelet.gif' title='cool'>",
                "<img src='../nge_chat/emot/anangis.gif' title='galau'>",
                "<img src='../nge_chat/emot/asakit.gif' title='hay'>",
                "<img src='../nge_chat/emot/bye.gif' title='kedip'>",
                "<img src='../nge_chat/emot/maki-maki.gif' title='kesetrum'>",
                "<img src='../nge_chat/emot/marah.gif' title='lol'>",
                "<img src='../nge_chat/emot/murung.gif' title='mewek'>",
                "<img src='../nge_chat/emot/nangis.gif' title='nangis'>",
                "<img src='../nge_chat/emot/sedih.gif' title='nyengir'>",
                "<img src='../nge_chat/emot/smile.gif' title='psimis'>",
                "<img src='../nge_chat/emot/bonus.png' title='rokok'>");
        $pesan=str_replace($symbol,$icon,$text_awal);
      
      
        // this is emoticon's operation bro
        echo "<p><span class='label label-info text-center'><i class='icon-user icon-white'></i> ".$ulangi['nick']." </span><small>&nbsp;".$pesan."</small>
        <small class='muted'>(".$ulangi['waktu'].")</small></p>";  
    }
    ?>
  • Kemudian buat file daftar.php
    ini scriptnya:

    <?php
    session_start();
    include "koneksi.php";
    $nick=trim($_POST['nick']);
    $email=trim($_POST['email']);
    $pass=md5($_POST['pass']);
    $periksadulu=$koneksi->prepare("select * from user where nick=:nick || email=:email");
    $periksadulu->BindParam(":nick",$nick);
    $periksadulu->BindParam(":email",$email);
    $periksadulu->execute();
    if($periksadulu->rowCount()>=1){
        echo "ada";
    }
    else
    {
        $daftarkan=$koneksi->prepare("insert into user (nick,email,pass) values (:nick,:email,:pass)");
        $daftarkan->BindParam(":nick",$nick);
        $daftarkan->BindParam(":email",$email);
        $daftarkan->BindParam(":pass",$pass);
        $daftarkan->execute();
        if($daftarkan->rowCount()==1)
        {
            $waktu=date("h:m:s");
            $online=$koneksi->prepare("insert into online (nick,waktu) values (:nick,:waktu)");
            $online->BindParam(":nick",$nick);
            $online->BindParam(":waktu",$waktu);
            $online->execute();
            $_SESSION['nick']=$nick;
            echo "yes";
        }
        else
        {
        echo "no";
        }
    }


    ?>
  • Kemudian buat file kirim.php
    ini scriptnya:

    <?php
    session_start();
    include "koneksi.php";
    $nick=$_SESSION['nick'];
    $pesan=strip_tags($_POST['pesan']);
    $waktu=date("h:m:s");
    $masukan=$koneksi->prepare("insert into pesan (nick,pesan,waktu) values (:nick,:pesan,:waktu) ");
    $masukan->BindParam(":nick",$nick);
    $masukan->BindParam(":pesan",$pesan);
    $masukan->BindParam(":waktu",$waktu);
    $masukan->execute();
    if($masukan->rowCount()==1)
    {
        print "terkirim";
    }
    else
    {
        print "gagal";
    }
    ?>
  • Kemudian buat file online.php
    ini scriptnya:

    <?php
    include "koneksi.php";
    $ambil=$koneksi->prepare("select * from online order by id desc");
    $ambil->execute();
    while($list=$ambil->fetch())
    {
        echo "<i class='icon-user'></i><span class='label label-info'>".$list['nick']."</span><span class='label'>".substr($list['waktu'],0,5)."</span><br>";
    }
    ?>
  • Kemudian kita buat javascript nya buatlah dengan nama file ajaxku.js
$(document).ready(function()
{
                // ajax login
                $("#formmasuk").submit(function()
                {
                var unick=$.trim($("#nick").val());
                var upass=$.trim($("#pass").val());
                if($("#cokie").is(':checked'))
                {
                    var cokie=$("#cokie").val();
                }
                $.ajax({
                url : 'login.php',
                data : 'nick='+unick+'&pass='+upass+'&cokie='+cokie,
                type : 'POST',
                success : function(hasil){
                                if(hasil=="ok")
                                {
                                document.location="index.php";
                                }
                                else
                                {
                                $("#masuk").html('Masuk');
                                $("#notif").html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>Nickname atau Password Salah ! </div>');
                                return false;
                                }
                            },
                    });
                    return false;
                });
          
            //ajax daftar
            $("#formdaftar").submit(function()
            {
            var unick=$("#dnick").val();
            var uemail=$("#email").val();
            var upass=$("#dpass").val();
            $.ajax({
            url : 'daftar.php',
            data : 'nick='+unick+'&email='+uemail+'&pass='+upass,
            type : 'POST',
            success : function(hasil){
                            if(hasil=="ada")
                            {
                            $("#dnotif").html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button> Anda sudah terdaftar ! </div>');
                            return false;  
                            }
                            else if(hasil=="yes")
                            {
                            $("#dnotif").html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">&times;</button>Pendaftaran Berhasil, Tunggu Sebentar ! <img src="alihkan.gif"></div>');
                                function alihkan()
                                {
                                document.location="index.php";
                                }
                                setTimeout(alihkan,5000);
                            }
                            else
                            {
                            $("#dnotif").html('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button> Gagal Mendaftar ! </div>');
                            return false;
                            }
                        },
                });
                return false;
            });
            //load pesan
            function ambilpesan()
            {
                $(".boxpesan").load("ambil.php");
                var con = document.getElementById("boxpesan");
                con.scrollTop = con.scrollHeight;
            }
            setInterval(ambilpesan,1000);
            //load online
            function ol()
            {
            $(".boxonline").load("online.php");  
            }
            setInterval(ol,1000);
            //kirim pesan chat
            $("#formpesan").submit(function()
            {
                var pesan=$(".input-xlarge").val();
                $.ajax({
                    url : 'kirim.php',
                    type : 'POST',
                    data : 'pesan='+pesan,
                    success : function(pesan)
                    {
                        // html5 DOM audio play
                        var suara=document.getElementById("suara");
                        suara.play();
                        if(pesan=="terkirim")
                        {
                            $(".input-xlarge").val("");
                        }
                        else
                        {
                            return false;
                        }
                    },
                    });
                return false;
          
            });
            //hide html audio
            var audio=$('#suara');
            audio.hide();
            //load pesan chat
            function ambilpesan()
            {
                $("#boxpesan").load("ambil.php");
                var con = document.getElementById("boxpesan");
                con.scrollTop = con.scrollHeight;
            }
            setInterval(ambilpesan,1000);
            //load emoticon
            $("#emot").popover({
            html: true,
            content: function(){
            // emoticon from www.animated-gifs.eu
            return "<img src='../nge_chat/emot/akasmaran.gif' title='[kasmaran]' onClick=\"addemot('[kasmaran]')\">"+
            "<img src='../nge_chat/emot/akedip.gif' title='[kedip]' onClick=\"addemot('[kedip]')\">"+
            "<img src='../nge_chat/emot/aketawa.gif' title='[ketawa]' onClick=\"addemot('[ketawa]')\">"+
            "<img src='../nge_chat/emot/amarah.gif' title='[marah]' onClick=\"addemot('[marah]')\">"+
            "<img src='../nge_chat/emot/amelet.gif' title='[melet]' onClick=\"addemot('[melet]')\">"+
            "<img src='../nge_chat/emot/anangis.gif' title='[nangis]' onClick=\"addemot('[nangis]')\">"+
            "<img src='../nge_chat/emot/asakit.gif' title='[sakit]' onClick=\"addemot('[sakit]')\">"+
            "<img src='../nge_chat/emot/bye.gif' title='[bye]' onClick=\"addemot('[bye]')\">"+
            "<img src='../nge_chat/emot/maki-maki.gif' title='[maki-maki]' onClick=\"addemot('[maki-maki]')\">"+
            "<img src='../nge_chat/emot/marah.gif' title='[cmarah]' onClick=\"addemot('[cmarah]')\">"+
            "<img src='../nge_chat/emot/murung.gif' title='[cmurung]' onClick=\"addemot('[cmurung]')\">"+
            "<img src='../nge_chat/emot/nangis.gif' title='[cnangis]' onClick=\"addemot('[cnangis]')\">"+
            "<img src='../nge_chat/emot/sedih.gif' title='[csedih]' onClick=\"addemot('[csedih]')\">"+
            "<img src='../nge_chat/emot/smile.gif' title='[csenyum]' onClick=\"addemot('[csenyum]')\">"+
            "<img src='../nge_chat/emot/bonus.png' title='[bonus]' onClick=\"addemot('[bonus]')\">";
            }
            });
          
          
});
// function add emot to chat form
function addemot(emot)
{
    document.forms[0].pesan.value+=" "+emot;
}
  • Setelah semua nya sudah selesai jangan lupa buat css nya dengan nama file style_sesudah.css

    html {
        height:100%;
    }
    body {
    background: #f2f3f4; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #f2f3f4 28%, #828c95 78%, #375987 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(28%,#f2f3f4), color-stop(78%,#828c95), color-stop(100%,#375987)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #f2f3f4 28%,#828c95 78%,#375987 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #f2f3f4 28%,#828c95 78%,#375987 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #f2f3f4 28%,#828c95 78%,#375987 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #f2f3f4 28%,#828c95 78%,#375987 100%); /* W3C */
    height:100%;
    height:100%;
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    .btn-danger {
    margin-top:20px;
    width:90%;
    }
    #emot{
    width:90%;
    }
    #boxpesan, .boxonline {
    overflow-y:auto;
    overflow-y:scroll;
    height:450px;
    width:100%;
    border:8px solid #404040;
    background-color:white;
    border-radius:10px;
    }
    input[type="text"]{
        width:80%;
    }
    input[type="submit"]{
        width:15%;
    }
    img{
    height:30px;
    width:30px;
    cursor:pointer;
    }
    p{
    line-height:25px;
    font-size:15px;
    }
    .popover{
    width:180px;
    }
    h1{
    text-shadow: 2px 2px #333300;
    }
Setelah semua sudah dibuat steep by steep, maka tampilan nya menjadi seperti gambar dibawah:
Download source code lengkapnya Disini (password: syntax404.tk).
Jangan Lupa Share dan dipelajari semua script diatas sudah ada penjelasan nya didalan script tersebut.
  • Thanks to allah
  • Thanks to jagocoding.com
Saya akhiri artikel tutorial ini semoga bermanfaat buat para pengunjung setia syntax404 sukses selalu ya Terima Kasih sudah membaca :)
Read more