Showing posts with label ajax. Show all posts

Cara Menampilkan Jam dengan PHP dan AJAX

Menampilkan Jam di browser dengan PHP yang auto update setiap detik ditampilkan bisa dibuat dengan memanfaatkan AJAX (Assincronus Javascript and XML). Logikanya kita buat dulu kode PHP untuk menampilkan Jam dari komputer kita, kemudian kita buat file baru yang berisi AJAX auto update dengan waktu satu detik. Jadi Perogram AJAX akan me-load fungsi PHP yang bertugas menampilkan Jam dari komputer kita tiap satu detik sekali, Karena di load tiap satu detik sekali maka tiap kali Jam berganti detik akan ditampilkan.
Ok langsung kita praktekan pertama buat dulu folder ajax di htdoc jika kalian menggunakan xampp atau di folder www jika anda menggunakan wamp lalu buat file jam.php isinya seperti berikut :

<?php
header('Access-Control-Allow-Origin: *');
date_default_timezone_set("Asia/Jakarta");  // untuk mengubah zona waktu
$arrDay = array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu");
$day = date("w"); //0-6 of day

echo "Sekarang adalah : <b>" . $arrDay[$day]."</b><br>";
echo "" . date("d/m/Y") . "<br>";
echo " " . date("H:i:s"); // untuk menampilkan jam
?>

kemudian buat file autoload.html isinya seperti berikut:

<html>
<head>
<style>
body {
background: url("bg.jpg") 30% center no-repeat;
}
#response {
margin: 250px auto;
width: 400px;
padding: 10px;
border: none;
background: rgba(0,0,0,0.5);
color: #fff;
font-size: 30px;
font-family: verdana;
}
</style>
<script src="jquery.js"></script>
<script>
var refreshId = setInterval(function(){
$('#response').load('jam.php');
}, 1000);
</script>
</head>
<body>
<div id="response">
</div>
</body>
</html>
pada kode html diatas saya menggunakan background gambar, gambarnya bisa kalian ubah sesuai gambar yang kalian miliki

kemudian karena AJAX nya menggunakan jquery silakan anda download file jquery terbaru di jquery.org kemudian file jquery yang telah anda download ganti namanya menjadi jquery.js dan pindahkan ke folder ajax tadi

setelah itu silkan di tes di browser dengan alamat http://localhost/ajax/autoload.html jika berhasil akan tampil seperti gambar diatas. Jika ingin mempercantik font jam nya bisa anda tambahkan google font. terimakasih semoga bermanfaat

Membuat Autocomplete Text dengan PHP, AJAX dan Bootstrap

Autocomple text biasanya digunakan pada form pencarian, misalnya di situs pencarian google ketika kita mengetik kata kita akan disuguhkan beberapa suggestion yang bisa dipilih, selain itu bisa juga diaplikasikan pada sistem login, ketika kita memasukan email akan ada pilihan jika sebelumnya sudah memasukan email yang sama. untuk membuatnya kita akan menggunakan AJAX. 



langkah pertama buat dulu HTMLnya seperti dibawah:

<!DOCTYPE html>
<
html>
<
head>
<
meta charset="utf-8">
<
title>Autocomplete Text</title>
<
script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous" charset="utf-8"></script>
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<
script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css">
<
script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js" charset="utf-8"></script>
</head>
<
body>
<
br><br>
<
div class="container" style="width:600px;">
<
h2 align="center">Autocomplete Textbox using Typeahead with Ajax PHP</h2>
<
br><br>
<
label>Search Country</label>
<
input type="text" name="country" id="country" class="form-control input-lg" autocomplete="off" placeholder="Type Country Name" />
</div>
</body>
</html>

<
script>
  $(document).ready(function(){

          $(
'#country').typeahead({
          source: function(query, result)
          {
          $.ajax({
          url:
"fetch.php",
          method:
"POST",
          data:{query:query},
          dataType:
"json",
          success:function(data)
          {
          result($.map(data, function(item){
         
return item;
          }));
          }
          })
          }
          });

          });
</script>

untuk jquery sama bootstrapnya diatas saya menggunakan CDN biar cepat, agar kita tidak usah download dulu, selanjutnya buat file php untuk mengambil datanya dari database

<?php



// fetch data

            $connect = mysqli_connect("localhost", "root", "", "database");

$request = mysqli_real_escape_string($connect, $_POST["query"]);

        $query = "SELECT * FROM countries WHERE name LIKE '%".$request."%'";



        $result = mysqli_query($connect, $query);



        $data = array();



        if (mysqli_num_rows($result) > 0)

        {

        while ($row = mysqli_fetch_assoc($result))

        {

        $data[] = $row["name"];

        }

        echo json_encode($data);

}

untuk tabel databasenya seperti ini:
-- phpMyAdmin SQL Dump

        -- version 4.5.1

        -- http://www.phpmyadmin.net

        --

        -- Host: 127.0.0.1

        -- Generation Time: 26 Sep 2017 pada 00.21

        -- Versi Server: 10.1.16-MariaDB

        -- PHP Version: 5.6.24



        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 utf8mb4 */;



        --

        -- Database: `database`

        --



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



        --

        -- Struktur dari tabel `countries`

        --



        CREATE TABLE `countries` (

        `id` int(11) NOT NULL,

        `sortname` varchar(3) NOT NULL,

        `name` varchar(150) NOT NULL,

        `phonecode` int(11) NOT NULL

        ) ENGINE=MyISAM DEFAULT CHARSET=latin1;



        --

        -- Dumping data untuk tabel `countries`

        --



        INSERT INTO `countries` (`id`, `sortname`, `name`, `phonecode`) VALUES

        (1, 'AT', 'Austria', 99),

        (2, 'US', 'United State', 1),

        (3, 'ID', 'Indonesia', 62),

        (4, 'IN', 'India', 60),

        (5, 'AG', 'Afganistan', 11),

        (6, 'UEA', 'Uni Emirate Arab', 20),

        (7, 'QA', 'Qatar', 32),

        (8, 'BR', 'Brazil', 46),

        (9, 'IC', 'Iceland', 10),

        (10, 'UK', 'United Kingdom', 12),

        (11, 'SW', 'Swiss', 9),

        (12, 'AU', 'Australia', 6),

        (13, 'FN', 'Finlandia', 23);



        --

        -- Indexes for dumped tables

        --



        --

        -- Indexes for table `countries`

        --

        ALTER TABLE `countries`

        ADD PRIMARY KEY (`id`);



        --

        -- AUTO_INCREMENT for dumped tables

        --



        --

        -- AUTO_INCREMENT for table `countries`

        --

        ALTER TABLE `countries`

        MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=14;

/*!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 */;


Selanjutnya jalankan Program Anda, jika ada yang kurang jelas silakan ditanyakan pada kolom komentar dibawah. jika artikel ini bermanfaat silakan share ke teman anda, terimakasih sudah berkunjung ke blog kami.

Membuat sistem Notifikasi Menggunakan PHP, AJAX dan Bootstrap

Pada kesempatan ini kita akan membahas tentang sistem notifikasi dengan menggunakan PHP, AJAX dan Bootstrap, sistem notifikasi ini bisa anda terapkan pada aplikasi / projek anda.



 langsung saja untuk membuatnya seperti biasa buat dulu html nya seperti berikut:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Popup Notification Like Facebook using PHP AJAX Bootstrap</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>

<style media="screen">

        #alert-popover

        {

        display: block;

        position: absolute;

        bottom: 50px;

        left: 50px;

        }

        .wrapper

        {

        display: table-cell;

        vertical-align: bottom;

        height: auto;

        width: 200px;

        }

        .alert-default

      {

              color: #333333;

              background: #f2f2f2;

              border-color: #cccccc;

              }

</style>

</head>

<body>

<br/><br/>

<div class="container">

<br>

<h2>Facebook Style Notification Using PHP Ajax & Bootstrap</h2>

<br>

<!-- Form  -->

<form id="comment_form" method="post">

<div class="form-group">

<label>Enter Subject</label>

<input type="text" name="subject" id="subject" class="form-control"/>

</div>

<div class="form-group">

<label>Enter Comment</label>

<textarea name="comment" id="comment" class="form-control"></textarea>

</div>

<div class="form-group">

<input type="submit" name="post" id="post" class="btn btn-info" value="Post"/>

</div>

</form>

<!-- Form berakhir disini  -->



<div id="alert-popover">

<div class="wrapper">

<div class="content">



</div>

</div>

</div>

</div>

</body>

</html>



<script>

  $(document).ready(function(){



          setInterval(function(){

          load_last_notification();

          }, 10000);



          function load_last_notification()

          {

          $.ajax({

          url:"fetch.php",

          method:"POST",

          success:function(data)

          {

          $('.content').html(data);

          }

          })

          }



          $('#comment_form').on('submit', function(event){

          event.preventDefault();

          if ($('#subject').val() != '' && $('#comment').val() != '')

          {

          var form_data = $(this).serialize();

          $.ajax({

          url:"insert.php",

          method:"POST",

          data:form_data,

          success:function(data)

          {

          $('#comment_form')[0].reset();

          }

          })

          }

          else

          {

          alert("Both Fields are Required");

          }

          });

          });

</script>

kemudian buat file PHP untuk menyimpan datanya seperti berikut:
<?php



        //insert

        if (isset($_POST["subject"]))

        {

        $connect = mysqli_connect("localhost", "root", "", "notification");

        $subject = mysqli_real_escape_string($connect, $_POST["subject"]);

        $comment = mysqli_real_escape_string($connect, $_POST["comment"]);



        $query = "INSERT INTO comments(comment_subject, comment_text) VALUES ('$subject', '$comment')";

        mysqli_query($connect, $query);

}

lalu buat lagi file php untuk mengambil datanya, file ini yang akan menampilkan notifikasinya dalam bentuk alert dialog:
<?php

    error_reporting(0);



//

$connect = mysqli_connect("localhost", "root", "", "notification");

        $query = "SELECT * FROM comments WHERE comment_status = 0 ORDER BY comment_id DESC";

        $result = mysqli_query($connect, $query);



        while ($row = mysqli_fetch_array($result))

        {

        $output .= '

<div class="alert alert-default">

<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

<p><strong>'.$row["comment_subject"].'</strong>

<small><em>'.$row["comment_text"].'</em></small>

</p>

</div>

        ';

        }



        $update_query = "UPDATE comments SET comment_status = 1 WHERE comment_status = 0";

        mysqli_query($connect, $update_query);

        echo $output;

terakhir untuk tabel databasenya seperti berikut:
-- phpMyAdmin SQL Dump
        -- version
4.5.1
       
-- http://www.phpmyadmin.net
       
--
        -- Host:
127.0.0.1
       
-- Generation Time: 26 Sep 2017 pada 00.17
       
-- Versi Server: 10.1.16-MariaDB
        -- PHP Version:
5.6.24

       
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 utf8mb4 */;

        --
        -- Database: `notification`
        --

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

        --
        -- Struktur dari tabel `comments`
        --

        CREATE TABLE `comments` (
        `comment_id`
int(11) NOT NULL,
        `comment_subject` varchar(
100) NOT NULL,
        `comment_text` varchar(
255) NOT NULL,
        `comment_status`
int(1) NOT NULL DEFAULT '0'
       
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

        --
        -- Dumping data untuk tabel `comments`
        --

        INSERT INTO `comments` (`comment_id`, `comment_subject`, `comment_text`, `comment_status`) VALUES
        (
1, 'peter send you a message', 'hello friend, how are you?', 1),
        (
2, 'hello friend, how are you?', 'hhhi', 1),
        (
3, 'hi', 'hello', 1),
        (
4, 'hi', 'hi', 1),
        (
5, 'peter parker send you a message', 'hi jhon ', 1),
        (
6, 'you have a friend request from jhon', 'jhon: do you a friend', 1),
        (
7, 'parker send you a message', 'Nice to meet you', 1);

        --
        -- Indexes
for dumped tables
        --

        --
        -- Indexes
for table `comments`
        --
        ALTER TABLE `comments`
        ADD PRIMARY KEY (`comment_id`);

        --
        -- AUTO_INCREMENT
for dumped tables
        --

        --
        -- AUTO_INCREMENT
for table `comments`
        --
        ALTER TABLE `comments`
        MODIFY `comment_id`
int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
/*!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 */;


silakan jalankan program anda jika ada yng kurang jelas silakan ditanyakan, jika artikel ini bermanfaat silkan di share, anda juga bisa melihat demo notifikasi ini pada tautan di bawah. terimakasih sudah mampir ke blog kami.

Membuat Tags dengan PHP, AJAX dan Bootstrap Tokenfield

Pernahkah anda melihat tags di blog atau website? Bagaimanakah cara membuatnya, kali ini kita akan membuat sistem tags dengan plugin bootstrap tokenfield, kemudian menyimpan datanya ke database dengan PHP dan AJAX.



 langkah pertama kita buat dulu HTMLnya:
<!DOCTYPE html>
<
html>
<
head>
<
meta charset="utf-8">
<
title>Multiple Bootstrap Tags with PHP and AJAX</title>
<
script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<
script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"></script>
<
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<
script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
<
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css">
<
script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js" charset="utf-8"></script>
</head>
<
body>
<
br>
<
div class="container">
<
div class="row">
<
h2 align="center">Insert Bootstrap tokenfield data using PHP AJAX</h2>
<
br>
<
div class="col-md-6" style="margin:0 auto;float:none">
<!-- pesan suksess -->
<
span id="success_message"></span>
<!-- form -->
<
form method="post" id="programmer_form">
<
div class="form-group">
<
label>Enter Name</label>
<
input type="text" name="name" id="name" class="form-control">
</div>
<
div class="form-group">
<
label>Enter your Skill</label>
<
input type="text" name="skill" id="skill" class="form-control">
</div>
<
div class="form-group">
<
input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

<
script type="text/javascript">

        $(document).ready(function(){

        $(
'#skill').tokenfield({
        autocomplete: {
        source: [
'PHP', 'Code Igniter', 'Ajax', 'JQuery', 'laravel', 'slim', 'mongo db', 'html', 'Bootstrap',
       
'css', 'javascript', 'JSON', 'angular js', 'node js', 'express js', 'socket.io', 'symphony',
       
'yii', 'mysql', 'oracle', 'xml', 'android', 'java', 'ember', 'cake php', 'git', 'Zend', 'Phalcon'],
        delay:
100
       
},
        showAutocompleteOnFocus:
true
       
});

        $(
'#programmer_form').on('submit', function(event){
        event.preventDefault();
       
if ($.trim($('#name').val()).length == 0)
        {
        alert(
"Please enter your name");
       
return false;
        }
       
else if ($.trim($('#skill').val()).length == 0)
        {
        alert(
"Please enter your skill");
       
return false;
        }
       
else
       
{
        var form_data = $(
this).serialize();
        $(
'#submit').attr("disabled", "disabled");
        $.ajax({
        url:
"insert.php",
        method:
"POST",
        data:form_data,
       
// untuk progress dialog atau loading
       
beforeSend:function(){
        $(
'#submit').val('Submiting...');
        },
       
// ketika suksess
       
success:function(data){
       
// jika data tidak kosong
       
if (data != '')
        {
       
// kosongkan input nama
       
$('#name').val('');
        $(
'#skill').tokenfield('setTokens',[]);
        $(
'#success_message').html(data);
        $(
'#submit').attr("disabled", false);
        $(
'#submit').val('Submit');
        }
        }
        });
        setInterval(function(){
        $(
'#success_message').html('');
        },
5000);
        }
        });

        });

</script>

kemudian untuk kode PHP nya seperti dibawah:
<?php



// insert data

        if (isset($_POST["name"]))

        {

        $connect = new PDO("mysql:host=localhost;dbname=tag","root","");

        $query = "INSERT INTO programmer(name, skill) VALUES (:name, :skill)";

        $statement = $connect->prepare($query);

        $statement->execute(

        array(

        ':name'  => $_POST["name"],

        ':skill' => $_POST["skill"]

        )

        );

        $result = $statement->fetchAll();

        $output = '';

        if (isset($result))

        {

        $output = '

<div class="alert alert-success">

        Your data has been successfully saved to system

</div>

        ';

        }

        echo $output;

}

dan untuk tabel databasenya seperti ini:
-- phpMyAdmin SQL Dump

        -- version 4.5.1

        -- http://www.phpmyadmin.net

        --

        -- Host: 127.0.0.1

        -- Generation Time: 25 Sep 2017 pada 23.47

        -- Versi Server: 10.1.16-MariaDB

        -- PHP Version: 5.6.24



        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 utf8mb4 */;



        --

        -- Database: `tag`

        --



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



        --

        -- Struktur dari tabel `programmer`

        --



        CREATE TABLE `programmer` (

        `id` int(11) NOT NULL,

        `name` varchar(255) NOT NULL,

        `skill` text NOT NULL

        ) ENGINE=MyISAM DEFAULT CHARSET=latin1;



        --

        -- Dumping data untuk tabel `programmer`

        --



        INSERT INTO `programmer` (`id`, `name`, `skill`) VALUES

        (1, 'Jhon Smith', 'PHP, Ajax, JQuery, css'),

        (2, 'Marina', 'Phalcon, Bootstrap, mongo db, angular js');



        --

        -- Indexes for dumped tables

        --



        --

        -- Indexes for table `programmer`

        --

        ALTER TABLE `programmer`

        ADD PRIMARY KEY (`id`);



        --

        -- AUTO_INCREMENT for dumped tables

        --



        --

        -- AUTO_INCREMENT for table `programmer`

        --

        ALTER TABLE `programmer`

        MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

/*!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 */;


Silakan Jalankan Program anda, bila ada yang kurang jelas atau ada yang ditanyakan silakan tinggalkan komentar dibawah, terimakasih sudah berkunjung ke blog kami, jika artikel ini bermanfaat silakan di share