Jumat, 08 Mei 2015

Membuat Pop Up Modal Dinamis Dengan Ajax, PHP dan MySQL

21.26  Unknown  5 comments

Assalamu 'alaikum wr.wb.

Selamat apa saja bagi para pecandu internet dan penikmat coding, jumpa lagi di blog ini. Kali ini akan membahas mengenai membuat pop modal dinamis. Seberapa penting pop up modal ? Penting bagi anda yang menginginkan website lebih menarik, interaktif dan lebih entertainment. Ada banyak library untuk membuat pop up modal, tapi sebagai contoh saya menggunakan library pop modal mike-modal dan bisa anda download disini, untuk library lain silahkan searching sendiri.

Lanjut ke implementasinya,

1. Buat database dengan nama misalkan modal, dan buat tabel misalkan produk.


2.  Buat koneksi ke database dengan nama misalkan koneksi.php

<?php
$host="127.0.0.1";
$user="root";
$pass="";
$database="modal";
$koneksi=new mysqli($host,$user,$pass,$database);
if (mysqli_connect_errno()) {
  trigger_error('Koneksi ke database gagal: '  . mysqli_connect_error(), E_USER_ERROR); 
}
?>

3.  Buat file index.php nya, seperti dibawah ini :

<!doctype html>
<html lang="en">
  <head>
    <title>Contoh</title>
    <link href="bootstrap.css" media="all" rel="stylesheet" type="text/css">
    <link type="text/css" rel="stylesheet" media="all" href="lib/mikes-modal.css">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport" />
    <meta content="Mike Silvis" name="author" /><meta content="!" name="fragment" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="lib/mikes-modal.min.js" type="text/javascript"></script>
  </head>
  <body>
  <p>
 <?php 
  include"koneksi.php";
  $produk=mysqli_query($koneksi,"SELECT * FROM produk");
while($p=mysqli_fetch_array($produk))
{
  echo"<a class='open-mikes-modal' id='".$p['produk_id']." '>$p[produk_name]</a>";
        }
  ?>
  </p>
  <div class="mikes-modal" id="myModal">
</div>
  </body>
  </html>

4. Untuk mengirim variabel ditambahkan script ajax dan diletakkan di bawah </div> dan diatas </body>. script nya seperti berikut :

<script>
      $(document).ready(function () {
        $(".open-mikes-modal").click(function(e) {
          var x = $(this).attr("id");
 $.ajax({
url: "produk_detail.php",
type: "GET",
data : {data1: x,},
success: function (ajaxData){
$("#myModal").html(ajaxData);
$("#myModal").modal('show');
}
 });
        });
      });
</script>

5. Lalu buat file sesuai url yang ditulis di script yang di nomor 4 yaitu produk_detail.php untuk menampilkan datanya.

<?php
include"koneksi.php";
$data1=$_GET['data1'];
$detail_produk=mysqli_query($koneksi,"SELECT * FROM produk WHERE produk_id='$data1'");
$dp=mysqli_fetch_array($detail_produk);
echo"<img src='images/cover/".$dp['produk_cover_image']."'/>
<div class='description'>
    <div class='title-area'>
          <h4>".$dp['produk_name']."</h4>
    </div>
</div>";
?>

Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat.

Wassalamu 'alaikum Wr. wb.



Read More

Selasa, 03 Maret 2015

Script Menyembunyikan Textfield Dinamis Dengan Javascript

00.30  Unknown  No comments

Assalamu 'alaikum wr. wb.

Selamat apa saja buat para pecandu internet yang menyempatkan mampir di blog saya ini.  Kali ini saya akan membahas bagaimana menyembunyikan textfield di aplikasi web secara dinamis. Kalau statis mudah tinggal di beri type hidden pada text field. seperti <input type='hidden' name='hidden_statis'/>.

 Selanjutnya untuk yang dinamis, seperti contoh dibawah ini:

1. Buat form inputan seperti ini:

<?php
echo"<form name='latihan' method='POST' action=''>
<table>
<tr><td>Textbox<td>
<td><input type='text' name='textbox' id='textbox' /><td>
</tr>
<tr><td>combobox<td>
<td><select name='combobox' id='combobox'>
       <option value=''>=pilih=</option>
          <option value='list1'>list1</option>
          <option value='list2'>list2</option>
 </select><td></tr>
  <tr><td>Text field</td>
  <td><input type='text' name='textfield' id='textfield'/>
  </td></tr>  <tr><td><td><td><button type='submit' name='simpan'></button>
  <td></tr>
</table>
</form>"; 
?>

2. Buat script untuk menyembunyikan dengan javascript.

<script language='javascript'>
function hiddenTextfield()
{
  if (document.latihan.combobox.value == " ")
    {
  document.latihan.textfield.style.visibility ="hidden";
    }
  else
  {
  document.latihan.textfield.style.visibility ="visible";
  }
}
</script>

3. Memanggil javascript diatas dan diletakan di dalam <select> atau comboboxnya dengan event onChange.

<select name='combobox' id='combobox' onChange='hiddenTextfied'>

 Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat.

Wassalamu 'alaikum Wr. wb.


Read More

Kamis, 26 Februari 2015

Script Membuat Aplikasi Website Expired/ Kadaluwarsa

19.50  Unknown  4 comments

Assalamu 'alaikum wr.wb.

Selamat datang kembali di blog yang saya cintai dan semoga anda juga mencintainya. Setelah hampir 1 bulan tidak memposting artikel gara-gara disibukan dengan malas. Kali ini saya akan "bercerita" tentang bagaimana membuat website itu kadaluwarsa. Kenapa harus ada website kadaluwarsa? sebenarnya ini rahasia tapi buat anda tidak ada yang rahasia. Tujuannya adalah untuk membatasi waktu penggunaan website atau aplikasi berbasis web untuk user pemilik website atau pengelola aplikasi berbasis web. Sebenarnya ada cara lain ketika website di online kan dengan pengaturan jangka waktu sewa hosting dan domain, tapi kalau aplikasi yang bersifat intern dalam suatu perusahan  dan tidak dionlinekan di internet global, salah satu caranya dengan membuat script untuk meng-expired-kan aplikasi.

Cukup itu saja mukodimahnya, langsung ke materi. biasanya aplikasi website itu diawali index.php atau index.html untuk memanggil default aplikasinya jadi, letakkan script di bawah ini di file index nya.

1. Script yang sudah ditentukan kapan tanggal expirednya . Misalkan tanggal expirednya 28 Januari 2015 untuk mempermudah dibuat versi english menjadi 2015-02-28.

<?php
$tgl_now=date("Y-m-d");
$tgl_exp="2015-02-28";//tanggal expired
if ($tgl_now >=$tgl_exp )
{
echo"<center><h1>web expired</h1>
<h3>Silahkan hubungi team olehmoco<h3></center>";
}
else
{
?>
<!--ISIKAN SCRIPT INDEXNYA DISINI-->
<?php
}
?>

2. Script berdasarkan jangka waktu pemakaian misalkan 1 tahun / atau 365 hari.

<?php
$tgl_now=date("Y-m-d");//tanggal sekarang
$tgl_launching="2015-01-01";// tanggal launching aplikasi
$jangka_waktu = strtotime('+365 days', strtotime($tgl_launching));// jangka waktu + 365 hari
$tgl_exp=date("Y-m-d",$jangka_waktu);//tanggal expired
if ($tgl_now >=$tgl_exp )
{
echo"<center><h1>web expired</h1>
<h3>Silahkan hubungi team olehmoco<h3></center>";
}
else
{
?>
<!--<!--ISIKAN SCRIPT INDEXNYA DISINI--> -->
<?php
}
?>

 Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat..

Wassalamu 'alaikum Wr. wb.
Read More

Kamis, 29 Januari 2015

HTML 5 - Membuat Drag dan Drop Gambar

10.41  Unknown  1 comment

Assalamu 'alaikum Wr. Wb.


Akhirnya bisa nge-blog lagi, mumpung ada internet gratis plus sekalian nge-refresh otak gara-gara diforsir untuk ngoding bikin aplikasi kantor.

Kali ini saya akan membahas mengenai HTML 5 yang merupakan pengembangan kelima dari versi HTML. HTML 5 didesain untuk memperbaiki dan mendukung multimedia terbaru.

Salah satu fungsi di HTML 5 adalah drag/drop yang akan dibahas sebagai berikut.

1. Buat tampilan seperti ini.


<style>
#div1,#div2 {width:150px;height:70px;padding:10px;border:1px solid #aaaaaa;}
#left {margin:20px 0px 0px 30px; width:200px;height:100px;padding:10px;border:1px solid #aaaaaa; float:left;}
#right {margin:20px 0px 0px 5px; width:200px;height:100px;padding:10px;border:1px solid #aaaaaa; float:left;}
</style>
<?php
echo"<div id='left'>
    <div id='div1'>
<img src='logo.jpg' height='60'/>
</div>
</div>
<div id='right'>
<div id='div2'></div><br>
</div>";
?>

Simpan script diatas dengan nama file, misal dragdrop.php dan jadikan satu folder dengan logo/gambar, gambar bebas.

2. Sisipkan script berikut di luar tag php atau cssnya.

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

 function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

 function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

3. Panggil fungsi diatas seperti contoh berikut ini.

Tambahkan ondrop dan ondragover setelah 'div1' dan 'div2'.

<div id='div1' ondrop='drop(event)'ondragover='allowDrop(event)'>

Tambahkan ondrggable , ondragstart dan id didalam tag <img />.

<img src='logo.jpg' height='60' odraggable='true' ondragstart='drag(event)' id='drag1'/>

Jadi, tag htmlnya setelah di ubah menjadi.

echo"<div id='left'>
    <div id='div1' ondrop='drop(event)' ondragover='allowDrop(event)'>
<img src='logo.jpg' height='60' odraggable='true' ondragstart='drag(event)' id='drag1'/>
</div>
</div>
<div id='right'>
<div id='div2' ondrop='drop(event)' ondragover='allowDrop(event)'></div><br>
</div>";

4. Dan coba tarik gambar logo OM ke kotak samping kanan dan hasilnya dibawah ini.

Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat.

Wassalamu 'alaikum Wr. wb.

Read More

Minggu, 25 Januari 2015

Validasi Form Dengan Javascript (peringatan value form kosong)

05.01  Unknown  5 comments

Assalamu 'alaikum Wr. Wb.

Setelah menikmati akhir pekan yang pendek, Allah SWT masih memberi kesempatan saya untuk menulis dan memposting coretan-coretan kecil yang semoga saja bermanfaat bagi yang membutuhkan tulisan ini.

Kali ini penulis akan menulis tentang validasi pada sebuah form. Kenapa harus validasi? karena validasi sangat penting dan salah satu bagian dari suatu program aplikasi untuk memudahkan user menjalankan program atau menghalangi user berbuat semaunya dalam input data, atau sebagai upaya untuk meminimalisir kerusakan data yang diinput.

Validasi yang banyak digunakan di pemrograman web salah satunya dengan javascript seperti contoh berikut:

1. Buat form inputan seperti dibawah ini :

<?php
echo"<form name='latihan' method='POST' action=''>
<table>
<tr><td>Textbox<td>
<td><input type='text' name='textbox' id='textbox' /><td>
</tr>
<tr><td>combobox<td>
<td><select name='combobox' id='combobox'>
       <option value=''>=pilih=</option>
          <option value='list1'>list1</option>
          <option value='list2'>list2</option>
 </select><td></tr>
  <tr><td><td><td><button type='submit' name='simpan'></button>
  <td></tr>
</table>
</form>"; 
?>

2. Buat script javascript untuk validasinya:

<script language='javascript'>
function validTextbox()
{
if (document.latihan.textbox.value == "") 
{
alert("Textbox masih kosong");
}
}

 function validCombobox()
{
if (document.latihan.combobox.value == "") 
{
alert("Combobox masih kosong");
}
}
</script>

3. Memanggil validasi tersebut dengan event yaitu event onclick dan disisipkan di button/submit seperti dibawah ini.

<button type='submit' name='simpan' onClick='validTextbox();validCombobox();'></button>

Nah.cukup mudahkan. silahkan dicoba dan lihat hasilnya. Insya Allah bisa.. mohon maaf jika ada kesalahan, mohon sarannya jika masih ada yang perlu diperbaiki, silahkan bertanya jika ada pertanyaan, akan dijawab semaksimal mungkin yang saya bisa, dan jangan menghujat.

Wassalamu 'alaikum Wr. wb.



Read More