Kamis, 08 Oktober 2015

Menampilkan Data Dengan Codeigniter dan JQUERY

Assalamu 'alaikum Wr. Wb.
Selamat apa saja bagi pecandu coding dan penikmat internet. kali ini membahas tentang menampilkan data dengan codeigniter dan jquery. Dimana saat ini framework sangat penting untuk membuat aplikasi website. 
Sebelum ke pembahasan download dulu framework codeigniter disini lalu extract ke host/di dalam htdocs. 

Setelah perangkat siap langkah-langkahnya sebagai berikut :

1. Buat database misal db_artikel dan tabel artikel dengan field artikel_id,artikel_judul,artikel_isi,artikel_author,artikel_lastupdate. 

2. Pengaturan Konfigurasinya

buka aplication/config/database.php.
        'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'db_artikel',
'dbdriver' => 'mysqli',
buka aplication/config/routes.php
        $route['default_controller'] = 'c_login';
buka aplication/config/config.php
        $config['base_url'] = 'http://localhost/artikel';
buka aplication/config/autoload.php
        $autoload['libraries'] = array('database');

3. Buat controller di application/controllers dan simpan dengan nama c_artikel.php.

<?php 
defined('BASEPATH') OR exit('No direct script access allowed');
class c_artikel extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('m_artikel');
}
public function index()
{
$data['title']= 'artikel';
$data['artikel']= $this->m_artikel->get_artikel();
$this->load->view('v_artikel',$data);
 } }

4. Buat model di application/models dan simpan dengan nama m_artikel.php.

<?php defined('BASEPATH') OR exit('No direct script access allowed');
class m_artikel extends CI_Model
{
public function __construct()
{
parent::__construct();
}
public function get_artikel()
{
$sql="SELECT*FROM artikel ORDER BY artikel_id DESC";
return $this->db->query($sql);
}
}

5. Buat view di application/views dan simpan dengan nama v_artikel.php.

<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Judul</th>
<th>Isi</th>
<th>Lastupdate</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<?php $no=1;
foreach($artikel->result() as $row){
?>
<tr>
<td><?php echo $no;?></td>
<td><?php echo $row->artikel_judul;?></td>
<td><?php echo $row->artikel_isi;?></td>
<td><?php echo $row->artikel_lastupdate;?></td>
<td><?php echo $row->artikel_author;?></td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>


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.
 

Jumat, 04 September 2015

Format Number Otomatis Dengan Jquery Mask Plugin

Assalamu 'alaikum wr.wb.

Selamat apa saja bagi pecandu coding dan penikmat internet. kali ini ingin membahas tentang bagaimana memisahkan koma dan titik disaat input angka di form inputan?. Salah satu jawabannya dengan menggunakan jquery mask plugin, yang bisa diunduh disini.

Langsung saja setelah didownload file nya, dipanggil di html nya seperti dibawah ini :

<script src="js/jquery.mask.js"></script>

Buat form inputan untuk memasukkan angka dengan class misal coba seperti dibawah ini.

<input type="text" name="coba" class="coba">

Selanjutnya, buat script jquerynya

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

    $(".coba").mask("000,000,000,000,000.0000",       {reverse:true});

}); 
</script>

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.

Minggu, 30 Agustus 2015

Mengambil Value Form Dengan JQUERY

Assalamu 'alaikum Wr.Wb.

Kali ini penulis akan berbagi cerita mengenai get value form atau mengambil value form dengan jquery. Karena jquery adalah bagian terpenting dalam pembuatan aplikasi web yang dinamis. Langkah-langkahnya sebagai berikut :

Membuat script html terlebih dahulu.

<html>
<head>
<title>AMBIL VALUE</title>
</head>
<body>
<form>
<table>
<tr>
<td><input type="text" name="input1" class="input1"></td>
<td><select name="select1" class="select1">
<option value="option1">OPTION 1</option>
<option value="option2">OPTION 2</option>
</select></td>
</tr>
<tr>
<td><button type="submit" class="proses">PROSES</proses></td>
</tr>
</table>
</form>
</body>
</html>

Disetiap form inputan diberi class, misalnya class="input1" seperti contoh diatas untuk dipanggil di script jquerynya.

Download file library jquerynya disini.
Membuat script jquery dan memanggil library jquery, lalu dimasukkan didalam tag <head></head>.

<script src="jquery-1.7.2.js"></script>
<script>
$(document).ready(function(e){
$(".proses").click(function(e){
var input_1=$(".input1").val();//get value untuk class input1
var select_1=$(".select1").val();//get value untuk class select1
alert (input_1);
alert (select_1);
e.preventDefault();
});
});
</script>

.proses adalah class dari button submit yang dipanggil di jquerynya dengan menggunakan event click.
alert untuk menampilkan value yang diisi di form input dan selectnya.

Untuk proses input data dll, tunggu postingan selanjutnya.

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.


Minggu, 05 Juli 2015

optimasi halaman website (HTTP compression)

Assalamu 'alaikum wr.wb.

Selamat apa saja bagi para pecandu internet dan penikmat coding, jumpa lagi di blog ini. Kali ini saya akan membahas cara optimasi halaman website yakni dengan HTTP Compression. Fungsinya apa? fungsinya untuk mengurangi waktu loading website/mempercepat loading website.

Ada 2 cara yang bisa digunakan untuk mengompres (HTTP compression)  jenis file yang ditransfer dari server, yaitu :

1. Mod_deflate 
Cara ini cocok untuk digunakan pada cpanel yang mendukung/mengaktifkan mod_deflate. Buka/buat file .htacess, dan masukkan code dibawah ini :

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/css text/x-component aplication/x-javascript aplication/javascript tex/javascript text/html text/x-js text/xml image/x-icon
AddOutputFilter DEFLATE css html htm js xml
</IfModule>

2. GZIP Compression
Caranya, jika anda punya file untuk menyimpan header misalkan header.php, maka masukkan kode ini di baris paling atas sendiri atau diatasnya code <!DOCTYPE html>.

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))

ob_start("ob_gzhandler");
}
else {ob_start();}
?>

<!DOCTYPE html>

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.

Jumat, 08 Mei 2015

Membuat Pop Up Modal Dinamis Dengan Ajax, PHP dan MySQL

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.