Our social:

Latest Post

Rabu, 07 Februari 2018

(Codeigniter) Ajax CRUD using Bootstrap modals and DataTables

Screenshot :

Ajax CRUD Datatable
Ajax CRUD DataTables
Bootstrap Modals (Adding data)
Bootstrap Modals (Adding data)
ajax crud bootstrap modals datatable edit
Bootstrap Modals (Editing data)

Required and Included on this source :

  1. PHP+ MySQL or you may use XAMPP –> Download
  2. Codeigniter 3.0 –> Download
  3. jQuery 2.1.4 –> Download
  4. Twitter Bootstrap 3.3.5 –> Download
  5. Bootstrap-datepicker 1.4.0 –> Download
  6. DataTables 1.10.7 –> Download

Database and Query :


[code hl="1, 4, 7"] create database crud; use crud; CREATE TABLE `persons` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `firstName` varchar(100) DEFAULT NULL, `lastName` varchar(100) DEFAULT NULL, `gender` enum('male','female') DEFAULT NULL, `address` varchar(200) DEFAULT NULL, `dob` date DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- example data persons INSERT INTO `persons` (`id`, `firstName`, `lastName`, `gender`, `address`, `dob`) VALUES (1, 'Airi', 'Satou', 'female', 'Tokyo', '1964-03-04'), (2, 'Garrett', 'Winters', 'male', 'Tokyo', '1988-09-02'), (3, 'John', 'Doe', 'male', 'Kansas', '1972-11-02'), (4, 'Tatyana', 'Fitzpatrick', 'male', 'London', '1989-01-01'), (5, 'Quinn', 'Flynn', 'male', 'Edinburgh', '1977-03-24'); [/code]

Configuring Codeigniter :

assets folder structure :
ajax crud bootstrap datatable assets
Assets Folder Codeigniter
Routing

path : config/route.php


[code hl="1, 4, 7"] $route['default_controller'] = 'person'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE; [/code]

Base URL Cofig (required if using Codeigniter 3.0.3 or later)

path : config/config.php

see for dynamic base_url : Dynamic base_url() and site_url() Codeigniter 3.0.3 +
in this source leave empty because using codeigniter 3.0

Source Code

model : Person_model.php
path : application/models/Person_model.php


[code hl="1, 4, 7"] 'desc'); // default order public function __construct() { parent::__construct(); $this->load->database(); } private function _get_datatables_query() { $this->db->from($this->table); $i = 0; foreach ($this->column_search as $item) // loop column { if($_POST['search']['value']) // if datatable send POST for search { if($i===0) // first loop { $this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND. $this->db->like($item, $_POST['search']['value']); } else { $this->db->or_like($item, $_POST['search']['value']); } if(count($this->column_search) - 1 == $i) //last loop $this->db->group_end(); //close bracket } $i++; } if(isset($_POST['order'])) // here order processing { $this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']); } else if(isset($this->order)) { $order = $this->order; $this->db->order_by(key($order), $order[key($order)]); } } function get_datatables() { $this->_get_datatables_query(); if($_POST['length'] != -1) $this->db->limit($_POST['length'], $_POST['start']); $query = $this->db->get(); return $query->result(); } function count_filtered() { $this->_get_datatables_query(); $query = $this->db->get(); return $query->num_rows(); } public function count_all() { $this->db->from($this->table); return $this->db->count_all_results(); } public function get_by_id($id) { $this->db->from($this->table); $this->db->where('id',$id); $query = $this->db->get(); return $query->row(); } public function save($data) { $this->db->insert($this->table, $data); return $this->db->insert_id(); } public function update($where, $data) { $this->db->update($this->table, $data, $where); return $this->db->affected_rows(); } public function delete_by_id($id) { $this->db->where('id', $id); $this->db->delete($this->table); } } [/code]

Controller Person.php
path : applications/controllers/Person.php
[code hl="1, 4, 7"] load->model('person_model','person'); } public function index() { $this->load->helper('url'); $this->load->view('person_view'); } public function ajax_list() { $list = $this->person->get_datatables(); $data = array(); $no = $_POST['start']; foreach ($list as $person) { $no++; $row = array(); $row[] = $person->firstName; $row[] = $person->lastName; $row[] = $person->gender; $row[] = $person->address; $row[] = $person->dob; //add html for action $row[] = 'id."'".')"> Edit id."'".')"> Delete'; $data[] = $row; } $output = array( "draw" => $_POST['draw'], "recordsTotal" => $this->person->count_all(), "recordsFiltered" => $this->person->count_filtered(), "data" => $data, ); //output to json format echo json_encode($output); } public function ajax_edit($id) { $data = $this->person->get_by_id($id); echo json_encode($data); } public function ajax_add() { $data = array( 'firstName' => $this->input->post('firstName'), 'lastName' => $this->input->post('lastName'), 'gender' => $this->input->post('gender'), 'address' => $this->input->post('address'), 'dob' => $this->input->post('dob'), ); $insert = $this->person->save($data); echo json_encode(array("status" => TRUE)); } public function ajax_update() { $data = array( 'firstName' => $this->input->post('firstName'), 'lastName' => $this->input->post('lastName'), 'gender' => $this->input->post('gender'), 'address' => $this->input->post('address'), 'dob' => $this->input->post('dob'), ); $this->person->update(array('id' => $this->input->post('id')), $data); echo json_encode(array("status" => TRUE)); } public function ajax_delete($id) { $this->person->delete_by_id($id); echo json_encode(array("status" => TRUE)); } } [/code]

view : person_view.php
path : application/views/person_view.php


[code hl="1, 4, 7"] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Ajax CRUD with Bootstrap modals and Datatables</title> <link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css')?>" rel="stylesheet"> <link href="<?php echo base_url('assets/datatables/css/dataTables.bootstrap.css')?>" rel="stylesheet"> <link href="<?php echo base_url('assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')?>" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1 style="font-size:20pt">Ajax CRUD with Bootstrap modals and Datatables</h1> <h3>Person Data</h3> <br /> <button class="btn btn-success" onclick="add_person()"><i class="glyphicon glyphicon-plus"></i> Add Person</button> <button class="btn btn-default" onclick="reload_table()"><i class="glyphicon glyphicon-refresh"></i> Reload</button> <br /> <br /> <table id="table" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Gender</th> <th>Address</th> <th>Date of Birth</th> <th style="width:125px;">Action</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <th>First Name</th> <th>Last Name</th> <th>Gender</th> <th>Address</th> <th>Date of Birth</th> <th>Action</th> </tr> </tfoot> </table> </div> <script src="<?php echo base_url('assets/jquery/jquery-2.1.4.min.js')?>"></script> <script src="<?php echo base_url('assets/bootstrap/js/bootstrap.min.js')?>"></script> <script src="<?php echo base_url('assets/datatables/js/jquery.dataTables.min.js')?>"></script> <script src="<?php echo base_url('assets/datatables/js/dataTables.bootstrap.js')?>"></script> <script src="<?php echo base_url('assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js')?>"></script> <script type="text/javascript"> var save_method; //for save method string var table; $(document).ready(function() { //datatables table = $('#table').DataTable({ "processing": true, //Feature control the processing indicator. "serverSide": true, //Feature control DataTables' server-side processing mode. "order": [], //Initial no order. // Load data for the table's content from an Ajax source "ajax": { "url": "<?php echo site_url('person/ajax_list')?>", "type": "POST" }, //Set column definition initialisation properties. "columnDefs": [ { "targets": [ -1 ], //last column "orderable": false, //set not orderable }, ], }); //datepicker $('.datepicker').datepicker({ autoclose: true, format: "yyyy-mm-dd", todayHighlight: true, orientation: "top auto", todayBtn: true, todayHighlight: true, }); }); function add_person() { save_method = 'add'; $('#form')[0].reset(); // reset form on modals $('.form-group').removeClass('has-error'); // clear error class $('.help-block').empty(); // clear error string $('#modal_form').modal('show'); // show bootstrap modal $('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title } function edit_person(id) { save_method = 'update'; $('#form')[0].reset(); // reset form on modals $('.form-group').removeClass('has-error'); // clear error class $('.help-block').empty(); // clear error string //Ajax Load data from ajax $.ajax({ url : "<?php echo site_url('person/ajax_edit/')?>/" + id, type: "GET", dataType: "JSON", success: function(data) { $('[name="id"]').val(data.id); $('[name="firstName"]').val(data.firstName); $('[name="lastName"]').val(data.lastName); $('[name="gender"]').val(data.gender); $('[name="address"]').val(data.address); $('[name="dob"]').datepicker('update',data.dob); $('#modal_form').modal('show'); // show bootstrap modal when complete loaded $('.modal-title').text('Edit Person'); // Set title to Bootstrap modal title }, error: function (jqXHR, textStatus, errorThrown) { alert('Error get data from ajax'); } }); } function reload_table() { table.ajax.reload(null,false); //reload datatable ajax } function save() { $('#btnSave').text('saving...'); //change button text $('#btnSave').attr('disabled',true); //set button disable var url; if(save_method == 'add') { url = "<?php echo site_url('person/ajax_add')?>"; } else { url = "<?php echo site_url('person/ajax_update')?>"; } // ajax adding data to database $.ajax({ url : url, type: "POST", data: $('#form').serialize(), dataType: "JSON", success: function(data) { if(data.status) //if success close modal and reload ajax table { $('#modal_form').modal('hide'); reload_table(); } $('#btnSave').text('save'); //change button text $('#btnSave').attr('disabled',false); //set button enable }, error: function (jqXHR, textStatus, errorThrown) { alert('Error adding / update data'); $('#btnSave').text('save'); //change button text $('#btnSave').attr('disabled',false); //set button enable } }); } function delete_person(id) { if(confirm('Are you sure delete this data?')) { // ajax delete data to database $.ajax({ url : "<?php echo site_url('person/ajax_delete')?>/"+id, type: "POST", dataType: "JSON", success: function(data) { //if success reload ajax table $('#modal_form').modal('hide'); reload_table(); }, error: function (jqXHR, textStatus, errorThrown) { alert('Error deleting data'); } }); } } </script> <!-- Bootstrap modal --> <div class="modal fade" id="modal_form" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h3 class="modal-title">Person Form</h3> </div> <div class="modal-body form"> <form action="#" id="form" class="form-horizontal"> <input type="hidden" value="" name="id"/> <div class="form-body"> <div class="form-group"> <label class="control-label col-md-3">First Name</label> <div class="col-md-9"> <input name="firstName" placeholder="First Name" class="form-control" type="text"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">Last Name</label> <div class="col-md-9"> <input name="lastName" placeholder="Last Name" class="form-control" type="text"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">Gender</label> <div class="col-md-9"> <select name="gender" class="form-control"> <option value="">--Select Gender--</option> <option value="male">Male</option> <option value="female">Female</option> </select> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">Address</label> <div class="col-md-9"> <textarea name="address" placeholder="Address" class="form-control"></textarea> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="control-label col-md-3">Date of Birth</label> <div class="col-md-9"> <input name="dob" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text"> <span class="help-block"></span> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- End Bootstrap modal --> </body> </html> [/code]
sumber

Kamis, 21 September 2017

Trigger

kurang lebih 9 bulan tidak aktif di blogger lagi kali ini saya coba posting dari pengalaman saya hari ini untuk penyelesaikan kasus di aplikasi saya mengenai php mysql, dimana perlu melakukan update terhadap suatu field dari table, berdasarkan isi field dari table lain, dan di aplikasi ini saya menggunakan trigger dari mysql, apakah itu trigger ?

trigger
Trigger adalah sebuah objek database yang di asosiasikan dengan sebuah tabel dan akan aktif (terpicu/trigger) ketika sebuah event terjadi pada tabel tersebut Trigger hanya terjadi ketika ada eksekusi INSERT, DELETE, dan UPDATE pada tabel yang bersangkutan Waktu eksekusi trigger yang mungkin terjadi terdiri dari 2 yaitu BEFORE dan AFTER dari statement SQLnya. Implementasi trigger yang sering ditemui dalam dunia nyata adalah untuk mengeset dan mengubah nilai kolom dalam suatu tabel sehingga validasi nilai dari tabel tersebut akan terjaga. Adanya trigger dalam database akan meringankan kita dalam pembuatan aplikasi karena di dalam aplikasi yang kita buat kita tidak perlu lagi untuk melakukan validasi data


Jenis Trigger
Ada 2 jenis trigger yaitu :
·         Application trigger: Terjadi pada saat sebuah kejadian

terjadi dengan aplikasi tertentu.

·         Database trigger : Terjadi pada saat terjadi sebuah

perubahan data seperti DML pada table (INSERT,

UPDATE atau DELETE)

caranya
script dasar dari trigger 


CREATE TRIGGER nama_trigger after kejadian(i/u/d) ON nama_tabel
 FOR EACH ROW BEGIN
 INSERT INTO nama_tabel SET
 nama_field = kejadian(new/old).nama_field
 , nama_field=kejadian(new/old).nama_field
 ON DUPLICATE KEY UPDATE nama_field=nama_field+kejadian(new/old).nama_field;
 END$$  

untuk memulainya, pertama kita harus membuat tabelnya
Table kesatu : beli
CREATE TABLE beli(
id_beli INT( 11 ) NOT NULL AUTO_INCREMENT ,
kd_barang VARCHAR( 5 ) DEFAULT NULL ,
nama_barang VARCHAR( 20 ) DEFAULT NULL ,
jumlah INT( 11 ) DEFAULT NULL ,
PRIMARY KEY ( id_beli )
) ENGINE = MYISAM DEFAULT CHARSET = utf8; 
 Table kedua : jual

CREATE TABLE jual(
id_jual INT( 11 ) NOT NULL AUTO_INCREMENT ,
kd_pelanggan VARCHAR( 10 ) NOT NULL ,
kd_barang VARCHAR( 5 ) DEFAULT NULL ,
nama_barang VARCHAR( 20 ) DEFAULT NULL ,
jumlah INT( 11 ) DEFAULT NULL ,
PRIMARY KEY ( id_jual )
) ENGINE = MYISAM DEFAULT CHARSET = utf8;

 Table ketiga : stok

CREATE  TABLE stok
(kd_barang varchar(5) NOT  NULL
, jumlah int(11) NOT NULL
, PRIMARY KEY (kd_barang)
) ENGINE = MYISAM  DEFAULT CHARSET = utf8;


Sekarang kita sudah mempunyai 3 table yang akan dieksekusi, alurnya seperti ini : Jika ada pembelian (kita membeli barang ke distributor) maka akan menambah stok barang. Jika ada penjualan (ada yang membeli barang kita) maka akan mengurangi stok barang. Bagaimana? Sudah mengerti alurnya? Jika sudah kita langsung buat triggernya.

*Note : Jangan lupa perhatikan tanda $$ (delimeter)nya. Jika lupa akan error. Delimeter akan membatasi akhir dari sebuah trigger.


 1. Membuat Trigger beli_barang

 
CREATE TRIGGER beli_barang after INSERT ON beli
 FOR EACH ROW BEGIN
 INSERT INTO stok SET
 kd_barang = NEW.kd_barang, jumlah=New.jumlah
 ON DUPLICATE KEY UPDATE jumlah=jumlah+New.jumlah;
 END$$  


Keterangan : Trigger diberi nama beli_barang, dan trigger akan bekerja setelah memasukkan data kedalam table beli. Dan secara otomatis akan menambahkan stok barang kedalam table stok. Karena data pada table beli masih nol, jika kita memasukkan data ke table beli, maka tidak akan ada penjumlahan yang terjadi.

Sekarang cobalah masukkan sebuah data ke dalam table beli.


Klik Go, lalu buka table stok. Jika berhasil, barang yang sudah dimasukkan di table beli akan masuk ke dalam table stok yatu kd_barang dan jumlahnya.







Sekarang, cobalah untuk memasukkan barang lagi ke table beli. Dengan kd_barang dan nama_barang yang sama. Tetapi bedakan jumlahnya, saya contohkan jumlahnya 23. Klik go dan coba lihat table stok





 Bertambah bukan? Sekarang sudah lebih mengerti konsep dari trigger kan? Jika sudah, kita buat trigger yang selanjutnya.

 2. Membuat trigger jual_barang

CREATE TRIGGER jual_barang after INSERT ON jual
 FOR EACH ROW BEGIN
 UPDATE stok
 SET jumlah = jumlah - NEW.jumlah
 WHERE
 kd_barang = NEW.kd_barang;
 END$$  

Keterangan : Trigger diberi nama jual_barang, dan trigger akan bekerja setelah memasukkan data kedalam table jual. Dan secara otomatis akan mengurangi stok barang dalam table stok.
Sekarang cobalah untuk memasukkan sebuah data ke dalam table jual. Kita akan mencoba memasukkan data yang telah ada di table beli (tersedia dalam stok).











 Klik Go, setalah itu buka table stok.






Jumlah stok yang awalnya 53 telah berkurang karena barang telah dibeli oleh pelanggan sebanyak 10.
Nah, itulah trigger. Sangat memudahkan bukan untuk memanipulasi data bukan? Semoga bermanfaat ya dan teruslah belajar :)

 sumber :
definisi trigger : http://memahamibdl.blogspot.co.id/2014/07/pengertian-trigger-dan-implementasinya.html
cara : https://www.dumetschool.com/blog/Cara-Membuat-Trigger-dI-MySQL

Cara agar Wallpaper Dekstop Tidak Bisa Diganti

Tampilan wallpaper atau gambar desktop merupakan salah satu hal yang sangat penting. Desktop background atau gambar wallpaper yang unik dan bagus bisa menjadikan pengguna lebih senang berhadapan dengan komputer. Setiap orang sebagai pengguna komputer tentu mempunyai rasa kesenangan yang berbeda-beda mengenai desktop background ini.


www.warung-alkautsar.blogspot.com
 
Cara mengganti gambar atau wallpaper desktop background yang biasa dilakukan adalah dengan klik kanan pada desktop kemudian pilih Properties. Pada jendela display properties, pilih tab desktop kemudian pilih salah satu pilihan gambar yang ada atau cari gambar lain di file dengan klik browse. Atur posisinya kemudian klik OK. Maka wallpaper akan berubah dan telah diganti.

Desktop background yang telah terpasang sesuai dengan selera dan keinginan ini, pada waktu dan kesempatan yang lain bisa saja berubah. Berubah wallpapernya karena diganti oleh upengguna lain. Tentu saja hal ini sangat menjengkelkan. cara agar wallpaper dekstop tidak bisa diganti, bisa dilakukan dengan cara :

Untuk pengguna windows xp

    1.Tekan tombol window + R (untuk membuka menu run)
    2.Ketik gpedit.msc kemudian tekan enter (untuk masuk ke jendela group policy editor)
    3.Masuk ke User Configuration > Administrative templates > Control Panel > Display
    4.Pada panel sebelah kanan, klik ganda pada prevent changing wallpaper

  www.warung-alkautsar.blogspot.com

    5. Ubah menjadi enable
    6. Masuk ke User Configuration --> Administrative Templates --> Start Menu and Taskbar --> pilih Prevent Changes to Taskbar and Start Menu Settings --> pilih enable --> klik Ok

www.warung-alkautsar.blogspot.com
  7. Masih di gpedit.msc, sekarang masuk ke User Configuration --> Administrative Templates --> Desktop --> Active Desktop --> pilih Active Desktop Wallpaper --> pilih enable --> masukan nama wallpaper beserta lokasi penyimpanannya --> pilih wallpaper type terserah kamu --> klik Ok.

www.warung-alkautsar.blogspot.com
    8. Klik OK
    9. Log off atau restart komputer

Untuk pengguna windows 7
  1. Tekan tombol window + R (untuk membuka menu run)
  2. Ketik gpedit.msc kemudian tekan enter (untuk masuk ke jendela group policy editor)
  3. Masuk ke User Configuration > Administrative templates > Control Panel > Personalization
  4. Pada panel sebelah kanan, klik ganda pada prevent changing desktop background
  5. Ubah menjadi enable klik OK

    www.warung-alkautsar.blogspot.com

  6. Mungkin diperlukan enable desktop wallpaper pada User Configuration > Administrative templates > desktop > desktop
  7. Klik OK
  8. Log off atau restart komputer
Setelah pengaturan diatas, user tidak bisa lagi untuk mengganti wallpaper atau desktop background. Tab desktop pada display properties akan menjadi tidak aktif, sehingga tidak bisa memilih gambar untuk desktop. Mereka akan berfikir “Desktop background atau wallpaper tidak bisa diganti”.





www.warung-alkautsar.blogspot.com  sumber

Kamis, 29 Desember 2016

pertama kali saya melihat syntax higlighter di blog tuttorial php, jquery tuttorial kali ini saya menerapkan kode tersebut sebagai fitur pendukung di blog ini caranya silahkan buka blogger > template > edit html, salin dan sisipkan sebelum ""
 
/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}
setelah itu simpan 3 kode di bawah ini sebelum "" atau ""




simpan template selanjutnya anda buat post baru , terapkan kode di bawah ini pada postingan tab HTML

 ... kode HTML (yang sudah di`escape`) di sini ... 
 ... kode CSS di sini ... 
 ... kode JavaScript di sini ... 
 ... kode jQuery di sini ... 

Rabu, 28 Desember 2016

Membuat Berita Dinding Auto Refresh Seperti Twitter dengan jQuery dan PHP

Kalau kita masuk ke halaman depan twitter.com, maka akan kita lihat semacam berita dinding yang menampilkan status atau berita terbaru dari para twitter. Berita terbaru tersebut ditampilkan secara scrolling, kemudian menngunakan efek fade in. Pada artikel kali ini kita akan belajar membuat seperti itu, dimana pada program kita kali ini, kita akan menampilkan lima berita terbaru secara scolling dan fade in (dari pudar mejadi jelas). Kemudian program kita secara periodik akan mengecek ke database, jika ada berita terbaru, maka akan langsung kita update di berita dinding.
twitter
Sekarang mari kita lihat algoritma dan kode dari program ini.
Algoritma
  1. Membuat database user dan berita
  2. Mengambil 5 berita terbaru dari database
  3. Memasukkan 5 berita ke dalam suatu variabel array, supaya gampang melakukan proses scrolling
  4. Melakukan scrolling 5 berita terbaru tersebut
  5. Mengecek berita terbaru setiap 4 detik, jika ada yang terbaru, tambahkan ke dalam variabel array untuk scrolling tersebut.
Untuk mengetahui atau belajar tentang jQuery Ajax dan efek-efek jQuery, silahkan download dan baca bukunya
Kode Lengkapnya
Berikut adalah struktur tabel_user dan tabel_berita
 
    
CREATE TABLE `tabel_user` ( `nomor` int(5) NOT NULL auto_increment, `userid` varchar(30) NOT NULL, `password` varchar(30) NOT NULL, `nama` varchar(30) NOT NULL, `email` varchar(30) NOT NULL, `photo` varchar(50) NOT NULL, PRIMARY KEY (`nomor`) );CREATE TABLE `tabel_berita` ( `nomor` int(5) NOT NULL auto_increment, `user_nomor` int(5) NOT NULL, `waktu` datetime NOT NULL, `berita` tinytext NOT NULL, PRIMARY KEY (`nomor`) );

Kamis, 10 November 2016

Cara Unpack File APK Android

Pemrograman mobile dengan file extensi APK sudah tidak asing lagi yang merupakan file jadi dari sebuah aplikasi yang siap di install pada perangkat android.

Cara Unpack File APK Android

Unpack File APK atau bisa di bilang Decompile sangat berguna ketika kita ingin mengetahui bagaimana Source Code file android yang sudah menjadi file APK.
Namun tidak semua file APK bisa di Decompile terkadang ada banyak Development Software yang Secure dan terkesan Close Source tidak ingin isi dari file APKnya dipelajari atau dimodifikasi.
Maka dari download Tools yang akan digunakan ToolsAlite, silahkan download pada link berikut ToolsAlite Decompile Android.
Sebelumnya Edit Environment Variables.
Cara Unpack File APK Android
Cara Edit Environment Variables :
  1. Cari Edit the system environtment variables pada pencarian Windows.
  2. Klik Environment Variables
  3. Edit Path
  4. Tambahkan C:\Program Files\Java\jre7\bin di belakang Path
  5. Klik OK
Setelah di setting dan selesai download, lalu extract file ToolsAlite, inputkan file APK yang ingin kita Unpack dengan cara memasukannya ke dalam folder input_apk.
Cara Unpack File APK Android
File APK Materi_Browser.apk yang berada dalam folder input_apk.
Cara Unpack File APK Android
Buka file ToolAlite.bat.
Cara Unpack File APK Android
Setelah itu inputkan "0" untuk Set Your Current Project (Menentukan File APK).
Cara Unpack File APK Android
Ketik angka "1" untuk memilih file APK.
Cara Unpack File APK Android
Ketik angka "2" untuk Decompile APK.
Cara Unpack File APK Android
Tunggu prosesnya selesai, setelah itu cek di folder 
Cara Unpack File APK Android
Buka filenya dan edit sesuai keinginan seperti folder assest, res, layout, dll.
Setelah selesai bisa di compile ulang, gunakan fitur yang ada pada menu ToolsAlite sebaik mungkin, selamat berexplore.
Sekian artikel tentang Cara Unpack File APK Android Cara Unpack File APK Android

Selasa, 21 Juni 2016

Tutorial Arduino - Library pada LCD (Liquid Cristal Display)

Tutorial Arduino library pada LCD (Liquid Cristal Display) yang mengambil referensi dari http://www.arduino.cc/en/Reference/LiquidCrystal. Gambar LCD 16X2 beserta pinnya terdapat pada gambar dibawah ini
Fungsi:
LiquidCrystal()
adalah setingan awal ketika menggunakan LCD, setingan ini berfungsi untuk konfigurasi dari pin LCD.

sintaknya :
LiquidCrystal(rs, enable, d4, d5, d6, d7)
LiquidCrystal(rs, rw, enable, d4, d5, d6, d7)
LiquidCrystal(rs, enable, d0, d1, d2, d3, d4, d5, d6, d7)
LiquidCrystal(rs, rw, enable, d0, d1, d2, d3, d4, d5, d6, d7)


Pin dari LCD 16 X 2

No Kaki/PinNamaKeterangan
1VCC+5V
2GND0V
3VEETegangan Kontras LCD
4RSRegister Select
5R/W1 = Read, 0 = Write
6EEnable Clock LCD
7D0Data Bus 0
8D1Data Bus 1
9D2Data Bus 2
10D3Data Bus 3
11D4Data Bus 4
12D5Data Bus 5
13D6Data Bus 6
14D7Data Bus 7
15AnodaTegangan backlight positif
16Katodategangan backlight Negatif


begin()
untuk menentukan dimensi dari lcd yang akan di gunakan
sintaknya : 
lcd.begin(cols,rows)



clear()
untuk menghapus layar LCD dan posisi kursor di sudut kiri atas.
sintaknya :
lcd.clear()

home()
Posisi kursor di kiri atas LCD. Artinya, menggunakan lokasi yang di keluaran teks setelah layar. Untuk juga menghapus layar, gunakan fungsi clear () sebagai gantinya.
sintaknya
lcd.home()

setCursor()
menentukan posisi cursor mulai penulisan
sintaknya :
lcd.setCursor(col,row)

write()
untuk menuliskan data pada LCD,misalkan akan menuliskan data dari hasil pembacaan serial dsb
sintaknya :
lcd.write(data)

print()
untuk menuliskan text pada LCD
sintaknya :
lcd.write("text")

cursor() dan noCursor()
Menampilkan kursor LCD: underscore (garis) pada posisi mana karakter berikutnya akan ditulis. dan menidaktampilkan
sintaknya : 

lcd.cursor()
lcd.noCursor()

blink() dan noBlink()
Menampilkan kursor LCD berkedip. Jika digunakan dalam kombinasi dengan fungsi cursor(), hasilnya akan bagus. noBlink (tidak menampilkan)
sintaknya :
lcd.blink()
lcd.noBlink()

display() dan noDisplay()
Menyalakan pada layar LCD, setelah itu sudah dimatikan dengan noDisplay (). Ini akan mengembalikan teks (dan kursor) yang ada di layar.
sintaknya :
lcd.display()
lcd.noDisplay()

scrollDisplayLeft() dan scrollDisplayRight()
skrol konten display satu space dari kiri / kanan
lcd.scrollDisplayLeft()
lcd.scrollDisplayRight()

autoscroll()
noAutoscroll()
leftToRight()
rightToLeft()
createChar()  

REFERENSI 
http://www.arduino.cc/en/Reference/LiquidCrystal
http://www.arduino.web.id/2012/04/library-pada-lcd-liquid-cristal-display.html
http://belajar-tanpa-henti.blogspot.co.id/2015/05/tutorial-arduino-library-pada-lcd.html

Sabtu, 04 Juni 2016

Pengetahuan Dasar RFID dan Pemrograman dgn Arduino

Hardware : Arduino board,  RFID Reader RC522, RFID TAG mifare
Software : Arduino IDE dan  hyperterminal ( atau yg sejenisnya)
Pendahuluan
RFID merupakan suatu teknologi yang memanfaatkan frekuensi radio sebagai identifikasi terhadap suatu objek. RFID dapat dipandang sebagai salah satu cara dalam pelabelan suatu objek. Pelabelan dalam hal ini menggunakan sebuah kartu RFID atau TAG yg ditempatkan pada objek yg diindentifikasi. Fungsi TAG sama dengan fungsi barcode label akan tetapi RFID mempunyai kelebihan daripada label barcode
tabelperbeda
RFIDSYSTEM
Gambar  1.    Overview of  RFID system
rfidinstall
RFID Card /TAG
Sebuah tag RFID atau transponder, terdiri atas sebuah microchip dan sebuah antena,. Chip tersebut menyimpan nomor seri yang unik/ID dan informasi lainnya tergantung kepada tipe memorinya. Tipe memori itu sendiri dapat read-only, read-write, atau write-onceread-many. Antena yang terpasang  pada mikrochip mengirimkan informasi ke reader RFID.
bentuk fisik Tag
mifaretagGambar 2. Bentuk fisik TAG berupa gantungan kunci dan kartu
Jenis Tag : pasive  dan aktive tag
Pasive Tag :passivetag
Gambar 3. Rangkain pasive TAG yg disederhanakan
Aktive tag:
aktivetag
Gambar 4. Rangkaian aktif tag  yang disederhanakan
struktur memory MIFARE Tag
TAG atau RFID card keluaran MIFARE mempunyai 1 kilo byte lokasi memory. yang dibagi menjadi 16 sector (no 0-15) dan 63 block (block 0-63). untuk membaca dan menulis  memory 1 block  cukup menggunakan alamat/nomor block.
memorytag
kotak merah adalah 1 sector  ,  1 Sector terdiri dari 4 block.
kotak biru adalah block tiap block terdiri dari 16 byte
Block yg ke-4 tiap sector adalah key block  untuk authentifikasi.  tdk digunakan untukmenyimpan data.  6 byte pertama dan 6 byte terakhir (kotak hijau) dari tiap block ini digunakan untuk authentifikasi.
kotak kuning (4 byte pertama block 0) adalah  ID (indentitas ) TAG . Tiap tag mempunyai ID yg berbeda. Oleh karena itu ketika kita  menulis ke block 0 tdk akan berhasil.
RFID Reader
Untuk berfungsinya sistem RFID, maka diperlukan sebuah reader atau alat scanning yang dapat membaca tag dengan
benar dan mengkomunikasikan hasilnya ke microprosessor/microcontroller.
RFID-RC522 - Pin Layout
Komunikasi antara TAG dan Reader bisa melalui serial USART, i2c dan SPI.  pada artikel ini digunakan serial SPI untuk membaca dan menulis data ke memory TAG.  Membaca dan menulis dilakukan oleh Arduino.
rfidkoneksi
Langkah langkah membaca dan menulis memory TAG pada program arduino
1.  masukan library MFRC522 kedalam program (#include MFRC522.h)
2. Buat objeck MFRC522 dgn cara  MFRC522 namaobjek(parameter).
3. Buat objek structur key dgn cara  MFRC522::MIFARE_Key key;
structur key digunakan untuk menyimpan 6 byte key authentifikasi
4. Inisialisasi RFID   dengan fungsi  PCD_Init();
5. Cek keberadaan TAG /RFID Card
if ( ! mfrc522.PICC_IsNewCardPresent())return;
6. Pilih salah satu TAG/ RFID card
if ( ! mfrc522.PICC_ReadCardSerial())return;
7. Authentifikasi menggunakan Key A atau B . lihat kotak hijau pada memori map dari TAG gambar diatas
status = mfrc522.PCD_Authenticate(MFRC522::PICC_CMD_MF_AUTH_KEY_A, trailerBlock, &key, &(mfrc522.uid));
if (status != MFRC522::STATUS_OK) {
Serial.print(“PCD_Authenticate() failed: “);
return;
}
Setelah dilakukan autentifikasi baru kita bisa membaca atau menulis  memory TAG / RFID Card
8. Membaca Memori TAG /RFID Card
status = mfrc522.MIFARE_Read(alamatBlock, buffer, &size);
if (status != MFRC522::STATUS_OK) {d
Serial.print(“Read failed: “);
}
kalau berhasl maka data hasil baca disimpan di array bernama buffer. sebelumnya kita deklarasikan dulu array buffer tsb.
9. Menulis ke memory TAG
status = mfrc522.MIFARE_Write(alamatBlock, dataBlock, 16);
if (status != MFRC522::STATUS_OK) {
Serial.print(“Write failed: “);
}
parameter  angka 16 adalah jumlah byte dlm1 block.
data yg akan ditulis disimpan di array dataBlock yg sebelumnya sudah kita buat.
10. Setelah selesai membaca atau menulis ditutup dengan perintah sbb:
// Halt PICC
mfrc522.PICC_HaltA();
// Stop encryption on PCD
mfrc522.PCD_StopCrypto1();
berikut ini contoh hasil  baca dan menulis kememory TAG:
tag memory r-w
Contoh program arduino membaca sector 1 dari memory  tag
/**
* Typical pin layout used:
* ———————————–
* MFRC522 Arduino
* Reader/PCD Uno
* Signal Pin Pin
* ————————————-
* RST/Reset RST 9
* SPI SS SDA(SS) 10
* SPI MOSI MOSI 11 / ICSP-4
* SPI MISO MISO 12 / ICSP-1
* SPI SCK SCK 13 / ICSP-3
*/
#include
#include

#define RST_PIN 9
#define SS_PIN 10
MFRC522 mfrc522(SS_PIN, RST_PIN); // Create MFRC522 instance.
MFRC522::MIFARE_Key key;
void setup() {
Serial.begin(9600);
SPI.begin(); // Init SPI bus
mfrc522.PCD_Init(); // Init MFRC522 card
// Prepare the key
// using FFFFFFFFFFFFh which is the default at chip delivery from the factory
for (byte i = 0; i < 6; i++) {
key.keyByte[i] = 0xFF;
}
}
/**
* Main loop.
*/
void loop() {
// Look for new cards
if ( ! mfrc522.PICC_IsNewCardPresent())
return;
// Select one of the cards
if ( ! mfrc522.PICC_ReadCardSerial())
return;
byte sector = 1;
byte blockAddr = 4;
byte trailerBlock = 7;
byte status;
byte buffer[18];
byte size = sizeof(buffer);
// Authenticate using key B
status = mfrc522.PCD_Authenticate(MFRC522::PICC_CMD_MF_AUTH_KEY_B, trailerBlock, &key, &(mfrc522.uid));
if (status != MFRC522::STATUS_OK) {
Serial.print(“Authenticate failed “);
return;
}
// Read data from the block
status = mfrc522.MIFARE_Read(blockAddr, buffer, &size);
dump_byte_array(buffer, 16); Serial.println();
Serial.println();
// Halt PICC
mfrc522.PICC_HaltA();
// Stop encryption on PCD
mfrc522.PCD_StopCrypto1();
}
/**
fungsi menampilkan data hex ke serial PC
*/
void dump_byte_array(byte *buffer, byte bufferSize) {
for (byte i = 0; i < bufferSize; i++) {
Serial.print(buffer[i] < 0x10 ? ” 0″ : ” “);
Serial.print(buffer[i], HEX);
}
}
Contoh program arduino menulis sector 1 ke memory tag
/**
* Typical pin layout used:
* ———————————–
* MFRC522 Arduino
* Reader/PCD Uno
* Signal Pin Pin
* ————————————-
* RST/Reset RST 9
* SPI SS SDA(SS) 10
* SPI MOSI MOSI 11 / ICSP-4
* SPI MISO MISO 12 / ICSP-1
* SPI SCK SCK 13 / ICSP-3
*/
#include
#include

#define RST_PIN 9
#define SS_PIN 10
MFRC522 mfrc522(SS_PIN, RST_PIN); // Create MFRC522 instance.
MFRC522::MIFARE_Key key;
void setup() {
Serial.begin(9600);
SPI.begin(); // Init SPI bus
mfrc522.PCD_Init(); // Init MFRC522 card
// Prepare the key
// using FFFFFFFFFFFFh which is the default at chip delivery from the factory
for (byte i = 0; i < 6; i++) {
key.keyByte[i] = 0xFF;
}
}
/**
* Main loop.
*/
void loop() {
// Look for new cards
if ( ! mfrc522.PICC_IsNewCardPresent())
return;
// Select one of the cards
if ( ! mfrc522.PICC_ReadCardSerial())
return;
// In this sample we use the second sector,
// that is: sector #1, covering block #4 up to and including block #7
byte sector = 1;
byte blockAddr = 4;
byte dataBlock[] = {
0x01, 0x02, 0x03, 0x04, // 1, 2, 3, 4,
0x05, 0x06, 0x07, 0x08, // 5, 6, 7, 8,
0x08, 0x09, 0xff, 0x0b, // 9, 10, 255, 12,
0x0c, 0x0d, 0x0e, 0x0f // 13, 14, 15, 16
};
byte sector = 1;
byte blockAddr = 4;
byte trailerBlock = 7;
byte status;
byte buffer[18];
byte size = sizeof(buffer);
// Authenticate using key B
status = mfrc522.PCD_Authenticate(MFRC522::PICC_CMD_MF_AUTH_KEY_B, trailerBlock, &key, &(mfrc522.uid));
if (status != MFRC522::STATUS_OK) {
Serial.print(“Authenticate failed “);
return;
}
// Write data to the block
status = mfrc522.MIFARE_Write(blockAddr, dataBlock, 16);
if (status != MFRC522::STATUS_OK) {
Serial.print(“Write failed: “);
return;
}
dump_byte_array(buffer, 16); Serial.println();
Serial.println();
// Halt PICC
mfrc522.PICC_HaltA();
// Stop encryption on PCD
mfrc522.PCD_StopCrypto1();
}
/**
fungsi menampilkan data hex ke serial PC
*/
void dump_byte_array(byte *buffer, byte bufferSize) {
for (byte i = 0; i < bufferSize; i++) {
Serial.print(buffer[i] < 0x10 ? ” 0″ : ” “);
Serial.print(buffer[i], HEX);
}
}
Library MFRC522 dan program lengkapnya anda bisa download dilink berikut ini : https://github.com/miguelbalboa/rfid
Referensi
The RF in RFID,  Passive UHF RFID in Practice by Daniel M. Dobkin