Our social:

Latest Post

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

Sabtu, 30 April 2016

Cara Menambahkan Syntax Highlighter di Blogger

Syntax Highlighter cukup dikenal oleh berbagai platform, misalnya WordPress, Apache, Mozilla, Yahoo, Aptana, dan banyak lainnya. Apa itu Syntax Highlighter? Kita para blogger seringkali berbagi script/kode untuk blogger atau siapapun yang membutuhkannya untuk pengembangan web/blog. Kebanyakan dari kita menggunakan blockquote sebagai "wadah" dari script/kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator atau petunjuk. Nah, SyntaxHighlighting adalah upaya untuk mempresentasikan script/kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode, misalnya Javascript, CSS, HTML, Phyton, PHP, dan masih banyak lagi. Ide ini tak lain datang dari si pembuat SyntaxHighlighter, Alex Gorbachev (thanks for the script).
Script SyntaxHighlighter ada beberapa jenis, yang terbaru sebenarnya lebih canggih lagi. Tetapi saya akan membagi versi standard-nya karena memiliki beberapa opsi saat mouse diarahkan ke atas script (muncul di pojok kanan atas) yaitu: View Source (dalam blank page, pop out), Copy to Clipboard, dan Print. Ketiganya sangat memudahkan dalam meng-copy, melihat kode dalam bentuk dan susunan aslinya, serta cetak kode. Masing-masing kode diterjemahkan oleh script yang disebut Brush.
Di beberapa platform seperti WordPress, Drupal, dan Joomla, kita bisa menggunakan berbagai jenis modul atau plugin SyntaxHighlighter siap pakai, tetapi di Blogger, kita harus menambahkannya secara manual. Berikut step by step-nya:

Menambahkan Script dan Brush ke dalam Template

1. Buka dashboard > template > edit HTML
2. Cari "]]>
"(ctrl + F dan masukkan ke dalam kotak pencarian, enter)
3.Sekaligus sebagai demo, berikut adalah contoh syntax highlighting-nya. Arahkan mouse ke atas script, di bagian pojok kanan atas akan muncul opsi, View Source, Copy to Clipboard, dan Print. Juga ada info script dari pembuatnya. Copy script berikut tepat di bawah ]]>
..
 
 
 
4. Save template.
Masing-masing script brush di atas berfungsi untuk menerjemahkan dan memberi style (warna) pada berbagai jenis script/kode seperti HTML, JS, CSS, PHP, Perl, Phyton, Ruby, XML, Java, dan berbagai script standard lainnya. Jika anda hanya membutuhkannya untuk highlighting script tertentu yang anda butuhkan, hapus yang tidak diperlukan.

Cara Menggunakan SyntaxHighlighther di dalam Post/Artikel Blog

Setiap jenis kode yang ingin ditampilkan di dalam halaman sebuah web biasanya menggunakan tag
, meskipun dalam beberapa hal juga 
bisa menggunakan tag . Untuk post blogger, kita akan 
menggunakan tag yang pertama. Kemudian masing-masing brush yang 
dibutuhkan dipanggil menggunakan atribut class. Contoh penulisannya:
    
    Kode Di Sini
    
Pada contoh di atas, kita lihat nantinya jenis-jenis kode yang akan di highlight adalah gabungan antara CSS, JS, PHP, SQL, dan Phyton. Jika anda hanya membutuhkan beberapa jenis saja, sekiranya yang diperlukan, maka gunakan brush sesuai jenis script saja. Misalnya, jika saya hanya butuh highlight HTML, JS, dan CSS, maka yang dibutuhkan adalah:
Kode Di Sini
Menggunakan yang diperlukan saja akan menghemat waktu load dan menghindari load script yang tidak perlu. Jadi jika anda biasanya hanya berbagi kode campuran yang terdiri dari 3 script umum di atas, gunakan susunan seperti contoh terakhir itu.
Berikut langkah-langkah menambahkan Syntax Highlighter ke dalam Post:
1. Ketika akan memasukkan kode, pindah dari mode "Compose" ke mode "HTML"
2. Kemudian masukkan tag
 dan class sesuai yang diinginkan, atau anda bisa copy contoh saya di atas.
3. Sebelum memasukkan kode di antara tag
, anda harus parse dulu kode tersebut. Ini Penting.
 Karena jika tidak di parse, maka kode yang dimasukkan ke dalam editor 
HTML akan diterjemahkan sebagai perintah, bukan teks biasa. Gunakan HTML/Script Parser, parse kode ke dalam tool tersebut, copy hasilnya, dan sisipkan ke dalam tag 
.
Contoh yang benar:
     
 <script type='text/javascript'>
    //<![CDATA[
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=App-ID";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    //]]>
    </script>
    
Dan berikut hasilnya:
4. Anda bisa kembali ke mode "compose" jika ingin melanjutkan menulis, sebelum mempublikasikan artikel.
5. Done.

catatan: script akan diload paling akhir oleh browser, jadi akan muncul belakangan setelah semua script dan elemen diload terlebih dahulu. Jadi syntaxt highlighter akan muncul paling akhir.
Itu dia bagaimana cara menggunakan Syntax Highlighter dengan benar di Blogger. Anda sebenarnya juga bisa menggunakan metode yang sama pada website lain, apabila ingin menambahkannya secara manual tentunya. Syntax Highlighter untuk Blogger di atas masih menggunakan skema warna default, ada beberapa variasi skema warna lain yang ke depan Insya Allah akan saya share. Juga. That's it for now and have a nice blogging, as always. :)
sumber

Minggu, 24 April 2016

Koneksi Database dengan Delphi & MySQL

Tulisan ini telah dipindahkan ke website baru kami, Tutorial Koneksi Database Menggunakan Delphi & MySQL. Komentar dan pertanyaan di blog ini tidak akan kami jawab lagi. Silahkan sampaikan komentar atau pertanyaan Anda pada link tulisan di atas.
Sedangkan untuk Delphi, MySQL dan Zeos, silahkan lihat Tutorial Koneksi Database Dengan Delphi, Zeos & MySQL. Terimakasih:)
Tingkat Kemahiran : Pemula
Software : Delphi 7, MySQL 4
INSTALASI MYSQL
MySQL Server dapat didownload di http://dev.mysql.com/. Petunjuk instalasi dapat Anda lihat pada dokumentasi yang disertakan dengan file arsip (*.zip) MySQL yang Anda download. Namun jika Anda tidak mau repot, berikut saya coba menunjukkan langkah-langkah instalasi MySQL Server sebagai service di Windows XP (SP2), dengan catatan, tidak ada modifikasi konfigurasi kecuali path-path MySQL.
·Untuk menginstall MySQl Server, ekstraklah file zip hasil download ke drive C:\ sehingga folder utama menjadi C:\MySQL-x.xx.
·Kemudian masuklah ke C:\MySQL-x.xx\, cari file-file dengan ekstensi *.cnf dan hapus. Hapus juga file My.cnf di drive C:\ jika ada. Hapus juga file my.ini di folder C:\Windows jika ada. Langkah ini untuk membuang kemungkinan konflik nantinya.
·Sekarang jalankan command prompt dari menu Start>Run, ketik CMD dan enter.
Ketik C:\ dan enter.
Ketik cd C:\MySQL-x.xx\Bin dan enter.
Ketik mysqld-nt –install dan enter, untuk menginstall MySQL sebagai service.
Ketik SC start mysql untuk menjalankan MySQL Service.
·Jika semuanya berjalan lancar, kini MySQL Server telah terinstall di komputer Anda.
Untuk menguji MySQL Server, kita akan mencoba membuat sebuah database dan sebuah tabel.
·Masih di command prompt,
ketik mysql -u root dan enter untuk menjalankan MySQL Client. Secara default user pada MySQL Server adalah root dan passwordnya kosong.
·Dari konsole MySQL Client, ketik perintah-perintah berikut ini:
mysql> Create database mydata;
Query OK, 1 row affected (0.00 sec)
mysql> use mydata;
Database changed
mysql> create table teman(
-> nama varchar(30) not null,
-> alamat varchar(100),
-> telepon varchar(15)
-> );
Query OK, 0 rows affected (0.05 sec)
Sampai di sini, Anda telah membuat sebuah database “mydata” dan sebuah tabel “teman” di dalamnya.
·OK, sekarang Anda bisa keluar dari konsole ini dengan mengetik
mysql> exit
Bye
KONEKSI DELPHI & MYSQL
Di Delphi, telah disediakan berbagai cara untuk berkomunikasi dengan MySQL Server, ada ADO/dbGo – dengan perantaraan MyODBC driver, ada juga BDE dengan memanfaatkan ODBC, ada pula dbExpress yang melakukan koneksi langsung ke Server dengan perantaraan library MySQL. Sampai nanti, yang akan kita bahas adalah dbExpress ini, sebab dbExpress adalah teknologi koneksi database asli dari Borland, dan sudah mendukung MySQL sejak Delphi 6. Meskipun demikian tidak tertutup kemungkinan bagi Anda untuk menggunakan komponen koneksi pihak ketiga dalam aplikasi Delphi Anda, seperti MyDac dan sebagainya. Jika Anda nantinya tertarik, http://www.torry.net menyediakan beragam library antarmuka Delphi – MySQL untuk Anda download.
OK, kini kita buat sebuah aplikasi baru di Delphi. Harap diingat, meski Delphi 6 sudah mendukung MySQL, namun yang saya gunakan dalam menulis posting ini adalah Delphi 2006. Kita lanjutkan dengan langkah-langkah berikut:
·Tambahkan sebuah TSQLConnection dari palette dbExpress ke form
­
jokorb_wordpress_post_mysql_delphi_1.gif
Atur property LoginPrompt menjadi False, lewat Object Inspector
·Klik kanan pada SQLConnection1 pada form dan pilih Edit Connection Properties
Sebuah dialog Connection Editor akan ditampilkan
jokorb_wordpress_post_mysql_delphi_2.gif
·Kita buat koneksi dengan mengklik tombol Add Conection
jokorb_wordpress_post_mysql_delphi_3.gif
Koneksi ini bertipe MySQL dan kita beri nama DBMyData
jokorb_wordpress_post_mysql_delphi_4.gif
Klik OK.
Kini kita atur property koneksi DBMyData ini seperti terlihat pada gambar berikut
jokorb_wordpress_post_mysql_delphi_5.gif
·Anda bias mencoba koneksi ini dengan mengklik tanda centang di bagian atas dialog. Jika pesan yang muncul menunjukkan koneksi sukses, selamat, Anda siap berksperimen dengan Delphi & MySQL!
·Klik OK untuk menutup dialog Connection Editor
·Kembali ke form, ubah properti SQLConnection1 menjadi True, sehingga koneksi ke MySQL menjadi aktif.
·Tambahkan sebuah TSQLTable dari palette dbExpress, sebuah TDataSource, TDataSetProvider dan TClientDataSet dari palette Data Access ke form
Atur properti SQLConnection milik SQLTable1 menjadi SQLConnection1 dan properti TableName menjadi “teman”, seperti yang telah kita buat pada langkah di atas.
jokorb_wordpress_post_mysql_delphi_6.gif
·Sekarang ubah properti Dataset dari DataSetProvider1 menjadi SQLTable1.
Ubah juga properti ProviderName dari ClientDataSet1 menjadi DataSetProvider1.
Terakhir, ubah properti DataSet dari DataSource1 menjadi ClientDataset1.
Dari langkah-langkah ini, kita bias melihat alur data dari server MySQL hingga ke GUI aplikasi kita dan juga sebaliknya, pada diagram berikut:
jokorb_wordpress_post_mysql_delphi_ilustrationdiagram.gif

Sebenarnya, akses data dalam table MySQL dapat langsung dilakukan antara DataSource1 dan SQLTable1, tapi karena SQLTable adalah dataset unidirectional (satu arah), penggunaan data control yang multidirectional menjadi tidak berfungsi dengan baik. Contoh, DBGrid, DBNavigator.
Pergerakan kursor penunjuk record pun hanya dapat bergerak dengan arah Next() dan First. Last() dan Next() tidak didukung.
Dataset unidirectional sangat menguntungkan saat koneksi ke SQL Server (pada umunya) mengembalikan sejumlah besar data, karena menghemat memori dan trafik network.
Delphi menyediakan cara mengatasi hal ini dengan menambahkan DataSetProvider dan ClientDataset di antara kedua komponen database di atas. Dataset provider berfungsi mengontrol data dari SQLTable, dan menyimpannya sementara secara lokal, dan kemudian direpresentasikan kembali dalam bentuk dataset oleh ClientDataset.

·OK. Kini kita tambahkan sebuah DBGrid [palette Data Controls] dan beberapa buah Button hingga tampilan form menjadi seperti ini:
jokorb_wordpress_post_mysql_delphi_7.gif
·Sekarang kodenya. Klik ganda Button1, yang memiliki caption “Pertama”. Ketikkan kode untuk navigasi ke data pertama
procedure TForm1.Button1Click(Sender: TObject);
begin
   ClientDataset1.First;
end;

Untuk Button Sebelumnya
procedure TForm1.Button2Click(Sender: TObject);
begin
if not ClientDataset1.Bof then
ClientDataset1.Prior
end;

Untuk Button Setelahnya
procedure TForm1.Button3Click(Sender: TObject);
begin
if not ClientDataset1.Eof do then
ClientDataset1.Next;
end;

Untuk Button Terakhir
1
2
3
4
procedure TForm1.Button4Click(Sender: TObject);
begin
ClientDataSet1.Last;
end;
Untuk Button Refresh
procedure TForm1.Button4Click(Sender: TObject);
begin
ClientDataSet1.Last;
end;

Untuk Button-Button lainnya dapat Anda lihat kodenya langsung pada demo program yang tersedia untuk Anda download di akhir tulisan ini.
·OK. Sekarang menampilkan data dari ClientDataset ke DBGrid. Seperti biasa, Anda cukup mengatur properti DataSource dari DBGrid1 menjadi DataSource1. Kini atur properti Active pada ClientDataset1 dan SQLTable1 menjadi True. Ubah juga properti Connection dari SQLConnection1 menjadi True.
·Jalankan program Anda.
jokorb_wordpress_post_mysql_delphi_8.gif


KODE SELENGKAPNYA
Berikut kode lengkap aplikasi yang baru kita buat di atas.

unit umain;
interface
uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, DBXpress, FMTBcd, StdCtrls, Grids, DBGrids, DB, Provider,
  DBClient, SqlExpr;
type
  TForm1 = class(TForm)
    SQLConnection1: TSQLConnection;
    SQLTable1: TSQLTable;
    ClientDataSet1: TClientDataSet;
    DataSetProvider1: TDataSetProvider;
    DataSource1: TDataSource;
    DBGrid1: TDBGrid;
    Button1: TButton;
    Button2: TButton;
    Button3: TButton;
    Button4: TButton;
    Button5: TButton;
    Button6: TButton;
    Button7: TButton;
    Button8: TButton;
    Button9: TButton;
    Button10: TButton;
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
    procedure Button3Click(Sender: TObject);
    procedure Button4Click(Sender: TObject);
    procedure Button5Click(Sender: TObject);
    procedure Button6Click(Sender: TObject);
    procedure Button7Click(Sender: TObject);
    procedure Button8Click(Sender: TObject);
    procedure Button9Click(Sender: TObject);
    procedure Button10Click(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;
var
  Form1: TForm1;
implementation
{$R *.dfm}
procedure TForm1.Button1Click(Sender: TObject);
begin
  ClientDataset1.First;
end;
procedure TForm1.Button2Click(Sender: TObject);
begin
  if not ClientDataset1.Bof then
    ClientDataset1.Prior
end;
procedure TForm1.Button3Click(Sender: TObject);
begin
  if not ClientDataset1.Eof then
    ClientDataset1.Next;
end;
procedure TForm1.Button4Click(Sender: TObject);
begin
  ClientDataSet1.Last;
end;
procedure TForm1.Button5Click(Sender: TObject);
begin
  if ClientDataset1.ChangeCount>0 then
    ClientDataset1.ApplyUpdates(-1);
  ClientDataset1.Refresh;
end;
procedure TForm1.Button6Click(Sender: TObject);
begin
  ClientDataset1.Delete;
end;
procedure TForm1.Button7Click(Sender: TObject);
begin
  ClientDataset1.Append;
end;
procedure TForm1.Button8Click(Sender: TObject);
begin
  ClientDataset1.Edit;
end;
procedure TForm1.Button9Click(Sender: TObject);
begin
  ClientDataset1.Cancel;
end;
procedure TForm1.Button10Click(Sender: TObject);
begin
  if ClientDataset1.ChangeCount>0 then
    ClientDataset1.ApplyUpdates(-1);
end;
end.


DOWNLOAD
Dan Berikut, Anda bias mendownload MySQL Server, library LIBMYSQL.DLL yang saya gunakan dalam tulisan ini, dan demo program yang kita buat di atas.
Catatan, file-file download harus diubah ekstensinya ke .zip , sebaiknya scan dengan antivirus dulu sebelum diekstrak.
 sumber