Membuat template KendoUI

Untuk anda yang kenal dengan Gaban! Pasti anda kenal dengan Shariban! Gaban ngak sengaja ketemu dengan pemuda ini dan beberapa event Shariban (sebelum berubah menjadi Shariban) dikirim ke akademi. Dan saat balik dia membantu Gaban melawan musuh yang selama ini dicari oleh Gaban. Saya tidak sempat menonton seri terakhir Gaban, tetapi aksi Gaban dan Shariban adalah aksi yang patut disaksikan.

Shariban

Mari mebahas tentang template KendoUI dan cara membuatnya. Sebenarnya tidak sulit kok, mungkin hanya harus dibiasakan. Pertama pergilah ke theme builder.. Theme builder ini bisa di akses dari sini. Pilih theme yang kamu sukai! Ada 5 tipe yaitu

• Black
• Blue Opal
• Default
• Metro
• Silver

Masalah tampilan pada Code Igniter (Framework)

Problem ini terjadi saat ada komplain klien. Klien merasa bahwa form/kotak yang saya buat kurang posisinya ke kanan. Ternyata memang benar pernyataan bahwa para designer takut dan benci pada perubahan design. Apalagi design itu dicoba di browser yang bisa dibilang tidak di testing oleh designer tersebut. Entah apakah saya pernah share tulisan ini atau belum, tapi saya asumsikan belum.

Cyclone

Untuk menyingkat saya memperbaikinya. Berterima kasih karena saya meletakkan coding utamanya (untuk tampilan) di file css. Jadi saya melakukan perubahan saja di CSS!! bukan di view. Perlu diketahui bahwa dengan meletakkannya di CSS, editing jadi lebih mudah. Tetapi entah kenapa masalah tiba-tiba muncul.

Saya asumsikan bahwa motor yang harusnya tampil harusnya bukan cyclone. Klien melaporkan bahwa motornya yang hadir tidak tepat, seharusnya berganti dengan motor lain seperti motor berikut

Ride Shooter (ryuki cs)

Melihat dari coding, saya melihat bahwa area preview itu dikendalikan oleh  CSS. Sedikit hint, backgroundnya yang perlu saya edit, karena kebetulan ukuran dan lebar sama jadi hanya ganti background semua langsung jadi.

Memakai KendoUI online

berangkat dari pembahasan "Cara memakai Kendo UI (offline)", kita sudah bisa membuat dalam mode Online. Mode online disini adalah kamu bisa memakainya di situs internet. Namun akan lebih baik bila anda menyisihkan uang untuk membayar Kendo UI. Memang terlihat boros, namun kedepannya bermanfaat! Lagipula kita bertindak adil dengan menghormati buatan orang.

Geronimo

Singkat kata sebenarnya, saya memakai cssnya yang lokal! tetapi JSnya tidak! artinya jsnya masih menunjuk ke site Jquery (http://code.jquery.com/jquery-1.7.1.min.js) dan KendoUI (yang ada di contoh sebelumnya). Dengan demikian saya tidak akan meletakkannya di server dan saya memanfaatkan KendoUI. Pada tips berikutnya saya akan mengajarkan cara membuat template kendoUI. Tidak sulit, tetapi lebih baik ada yang membimbing daripada anda salah dan takut.

CSS >> Padding

Ironman 3 sudah hadir infonya. Temanku jadi galau melihat previewnya. Tetapi bagi saya yang terpenting adalah jalan cerita bukan teknologinya.

Iron man

Untuk menyingkat tulisan. Saya membuat sebelumnya tentang margin. Bila margin adalah batas dari sisi terluar tag, maka padding dihitung dari sisi terdalam. Keduanya bisa dibilang mirip, tetapi dalam penggunaannya tentu saja berbeda. Ada beberapa bentuk padding yaitu

• Padding: 10px;
• Padding: 10px 20px;
• Padding: 10px 20px 30px 15px;

hasil di atas tentu saja berbeda, penjelasa panjang tentu bikin anda bosan.. Jadi mari kita coba. pada dasarnya padding itu kalau dibagi-bagi menjadi

• padding-top
• padding-left
• padding-bottom
• padding-right

anda bisa langsung menulis padding-top bila hanya butuh padding-top saja. Tetapi saya membiasakan diri mengetik padding lalu memberikan angkanya semua seperti no 3 (Padding: 10px 20px 30px 15px;)

Padding: 10px;

Padding: 10px 20px;

Padding: 10px 20px 30px 15px;

sudah terlihat perbedaannya? penjelasannya:

• Padding: 10px;
  dari sisi terdalam 10px untuk semua sisi
• Padding: 10px 20px;
  dari sisi terdalam 10px untuk atas dan bawah, 20px dari kanan dan kiri. Untuk kanan tidak terlihat jelas tentunya dalam contoh di atas.
• Padding: 10px 20px 30px 15px;
  dari sisi terdalam 10px untuk sisi atas, 20 dari kiri, 30 dari bawah, dan 15 dari kanan.

Berikutnya kita akan mencoba meneruskannya ke "clip" .. css yang bisa kubilang agak unik

Cara memakai Kendo UI (offline)

SHF Gavan type-G SOON!

Soon.. Very Soon.. Polisi luar angkasa ini datang ke Bumi buat nyari Bokapnya. Sekaligus mengunjungi tempat ibunya lahir (tanah airnya). Ini mengingatkanku tentang masa lalu dimana aku menyukai Gaban.. Bahkan hingga sekarang. Kalau melihat polisi Indonesia saat ini yang dipengaruhi oleh hal-hal negatif dan korupsi.. membuatku berfikir tentang perlunya Gaban di Indonesia ini.

Sekarang saya akan membahas tentang tips sederhana memakai Kendo UI. Perlu diketahui saya mendapat pertanyaan (sayang bukan pertanyaan ke blog), bagaimana cara memakai kendo UI kalau saya tidak memiliki sumbernya.. Itu jadi kebingungan saya, kenapa tidak regis di kendoUI lalu dapet link download demonya?!?

Akhirnya saya melihat bahwa ini memang kemalasan dari programer. Programer boleh malas, tetapi tidak boleh malas mendapatkan ilmu.. Harusnya mencari cara agar kemalasannya dapat membantu kinerjanya.

CSS >> Margin

Sebelumnya kita sudah mencoba float, clear dan juga position. Berikutnya adalah margin. Nanti setelahnya kita akan mencoba Padding.

Saya berfikir dahulu, bukan pusing

Sebelumnya kita pelajari bahwa namanya halaman memiliki namanya margin. Kalau dalam analogiku, margin = lajur. Atau kita bisa katakan batas. Batas dari sisi terluar hingga terdalam. Atau bisa kita bilang seperti besar area diluar dari area rumah/kamar kita. Nantinya kita akan pelajari Padding, dimana dari sisi area rumah kita.. harus masuk kedalam beberapa pixel. 

Saya sudah terjebak dengan pemakaian padding dan margin. Pemakaian yang saya maksud adalah menentukan 'jumlah' sebenarnya yang digunakan oleh area (DIV) yang saya beri style tersebut. Untuk margin, area yang saya beri akan bertambah sejumlah dengan margin yang diberikan. Misal saya memiliki 100 pixel (horizontal), saat saya beri margin 20.. maka kita akan dapat 140!! karena ada 20 pixel tambahan. Sedangkan Padding kita beri 100, maka tetap 100! Namun penjelasan Padding akan dibahas nanti.

Penggunaan margin dalam html/css adalah

margin: 0px;

atau

margin: 10px 10px 20px 20px; 

dapat dipecah menjadi

• margin-top
• margin-right
• margin-bottom
• margin-left

tanpa basa-basi inilah contohnya.

margin:10px

margin:10px 20px

margin:10px 0

tampaknya untuk tampilan di atas tidak menyertakan margin-top dan bottom... jadi bentuknya tidak sesuai keinginan. jadi kumasukkan padding 1px untuk gambaran saja.

margin: auto; width: 300px;

Untuk membuat ditengah.. tulis saja margin auto, jangan lupa ukurannya (300px). tidak memberikan berapa panjangnya tidak akan bisa menjadi ditengah seperti di bawah

margin: auto;

intinya.. jangan menjadi

pusing

CSS >> Clear

Saber dikenal sebagai salah satu karakter anime yang terkenal. Dibuat dengan konsep raja Arthur jaman pedang dan sihir. Dia awalnya digambarkan pria, tetapi malah di buat konsepnya jadi perempuan seperti disini. Ternyata konsep ini sangat sukses dan dia memiliki banyak varian.

Dalam membuat sebuah html dengan float kiri atau kanan, terkadang kita ingin agar setelah itu akan ada garis yang melingkupi area dimana kotak itu berada. Sebenarnya menggunakan table lebih baik tetapi kenyataannya kebanyakan memakai table. Bahkan ada yang menyarankan menghindari table, kecuali bila kamu tak memiliki solusi lain.

Clear disini adalah memberikan pembersihan, walaupun clear memiliki 5 nilai yaitu:

1. left No floating elements allowed on the left side
   
2. right No floating elements allowed on the right side
   
3. both No floating elements allowed on either the left or the right side
   
4. none Default. Allows floating elements on both sides
   
5. inherit
   

walaupun nilai terakhir tidak kuhitung sebenarnya.

CSS >> Float

Position memiliki keterkaitan dengan float walau tidak secara langsung. Sama dengan gambar berikut yaitu 'Power Ranger Hijau' yang berkaitan tidak langsung dengan Zyuranger. Secara umum memang tidak dapat disamakan keduanya. Tetapi karena adanya Power ranger, nama sentai setelahnya jadi terkenal. Lalu apa hubungannya di position dan float??

Float diketahui kegunaannya karena kemampuan position, yang menentukan posisi dari sebuah tempat tertentu. Perlu di garis bawahi, kita tidak bisa menyamakan keduanya. Untuk nilainya hanya terbatas 4 saja yaitu

• None. Standarnya
• Left. Kiri
• Right. Kanan
• Inherited. Turunan dari sebelumnya.

Pemakaian float akan mudah mendapatkan kendala, seperti posisi yang kurang tepat sehingga bisa saja membuat berantakan. Kita jangan lupa memakai clear untuk merapikan kembali .. tentu gunakan sesuai keperluan. Dibawah adalah contoh dari div yang saya buat dan semoga terlihat jelas.

float: none;

float: right;

float: left;

Jangan ngetik sambil ngantuk

Ngetik sambil ngantuk itu bahaya.. makanya persiapkan dirimu dengan melihat yang mulus-mulus.. kayak gambar dibawah

mimpi buruk

Udah melek khan!! Bagus! Blogger ini kugunakan untuk backup situs utama. Jika anda ingin yang lebih up to date, maka pergi ke http://world.detiara.16mb.com/  kebanyakan update akan dilakukan disana.

Sedikit bocoran, saya sedang berusaha untuk memanfaatkan Joomla dan tidak memakai Wordpress lagi (saat ini masih menggunakan wordpress). Memang lebih repot ngetiknya, tetapi sangat bermanfaat karena nantinya site tersebut bisa lebih luas penggunaannya.

Alasan lain karena saya tidak bisa bikin plugins WP.. walau begitu tetap juga tidak bisa membuat plugins di Joomla..

CSS >> BORDER (3)

Sebelumnya saya akan tunjukkan bentuk style dalam border

dotted

dashed

solid

double

groove

ridge

inset

outset

inherited

None

hidden

Berikutnya saya akan bahas tentang Radius. Radius sendiri terdiri dari :

1. border-top-left-radius:2em;
2. border-top-right-radius:2em;
3. border-bottom-right-radius:2em;
4. border-bottom-left-radius:2em;

untuk format agak membingungkan. Untuk mudahnya saya menulis

border-radius: 2em 1em 4em 3em/ 0.5em 3em;

(memakai /). Disini saya mendeklarasikan

1. border-top-left-radius:2em 0.5em;
2. border-top-right-radius:1em 3em;
3. border-bottom-right-radius:4em 0.5em;
4. border-bottom-left-radius:3em 3em;

agak sulit membuat penjelasan atas ini. Versi lebih mudahnya

border-radius: 2em 1em 4em 3em

saya mendeklarasikan

1. border-top-left-radius:2em ;
2. border-top-right-radius:1em;
3. border-bottom-right-radius:4em;
4. border-bottom-left-radius:3em ;

CSS >> Bottom

style ini digunakan untuk meletakkan sesuatu seperti gambar/div (disarankan div jangan ke gambar) dibawah. Perlu diperhatikan bahwa penggunaan Bottom ini tergantung pada position, percobaan dengan berbagai position berbeda akan menghasilkan hal berbeda. Perhatikan logicnya dalam meletakkannya. percobaan dibawah:

position:absolute; bottom:5px;

  bottom: -65px; position: relative;

bottom: +10px; position: relative;

Berikutnya kita akan membahas position.

Pengertian PHP

sampai saat ini saya penasaran apa itu PHP

Berikut ini adalah masukan dari beberapa teman tentang arti nama PHP

• Penyakit Hama Padi
• Pemberi Harapan Palsu (Mario teguh)
• Pegangan Hidup Programmer
• Pemain Hati Perempuan
• Pretty Hot Programmer
• project hana peng
• Perusak Hidup Perempuan
• Pas Hidup Pas-pasan
• Punya Hobi Plototin
• Panakluk Hati Perempuan
• Pak Hidayat Pinter
• Plinik Hong Peng

astaga.. ternyata aku salah memilih PHP sebagai bahasaku

CSS >> Border (2)

Pada topik sebelumnya kita membahas border, border sendiri memiliki 3 sub bagian yaitu:

1. Warna 
2. gaya 
3. dan besar

Sebagai contoh:

border-bottom 3px solid blue

Untuk bottom kita bisa memecah sebagai berikut:

• border-bottom-color . Nilainya:
  1. yellow; 
  2. #00ff00; 
  3. rgb(255,0,255);
• border-bottom-style. Nilainya dapat dilihat di style (ada dibawah)
• border-bottom-width. Ukuran berupa pixel / px

Bentuk CSS Border lainnya

1. border-collapse memiliki nilai :
   • collapse;
   • separate;
   • Inherited
     
2. border-spacing. Di isi angka berupa pixel
3. border-color: di isi warna seperti
   • yellow;
   • #00ff00;
   • rgb(255,0,255);
4. border-style
   • none; 
   • hidden; 
   • dotted; 
   • dashed; 
   • solid; 
   • double; 
   • groove; 
   • ridge;
   •  inset; 
   • outset;
   •  inherited

BORDER-IMAGE

format dasar

border-image: url(border.png) none 100% 1 0 stretch;

saya kurang faham penggunaan border-image, tetapi tampaknya tidak begitu bagus digunakan. Untuk hasil yang lebih maksimal, masukkan juga dengan tulisan dibawah:

• -moz-border-image source slice width outset repeat;
• -webkit-border-image
• -o-border-image

Dimana formatnya sama seperti di atas. Penjelasan tentang isi dari border-image, border image ini terdiri dari

• source 
• slice
• width
• outset
• repeat;

Versi detailnya

• border-image-source
• border-image-width
  

Untuk keamanan lebih baik hindari

• border-image-repeat(stretch|repeat|round;); 
• border-image-outset (angka px); 
• border-image-slice (angka|%|fill;)

didalam kurung adalah nilai yang bisa dimasukkan


berikutnya kita akan membahas border-radius

CSS >> BORDER (1)

Border disini ditujukan untuk memberi garis di luar wilayah tag. Perlu diperhatikan bahwa garis ini bisa tidak sejalan dengan harapan karena beberapa alasan tertentu. Perhatikan coding HTMLnya.
Format

BORDER: 3px solid blue

Beberapa sub bagian dari border. Untuk posisi (normal) border terdiri dari

• TOP
• BOTTOM
• LEFT
• RIGHT

border-bottom

format:

3px solid blue;

border-bottom

format:

2px solid red;

border-left

format:

3px solid blue;

border-right

format:

2px solid red;

CSS >> background

Background digunakan untuk memasukkan gambar/warna di dalam div atau tag html. Tidak semua tag dapat memakai background dengan sempurna.

Format dasar:

background: url('paper.gif') yellow no-repeat;

Sub bagian dari Background:

1. background-attachment. Nilainya
   
   • Scroll
   • Fixed
   • inherited
2. background-color. Nilainya
   
   • yellow;
   • #00ff00;
   •  rgb(255,0,255);
3. background-image. nilainya : url(xxxx.gif );
4. background-position. nilainya
   
   • left top
   • left center
   • left bottom
   • right top
   • right center
   • right bottom
   • center top
   • center center
   • center bottom
   • x% y%
   • xpos ypos
   • inherit
5. background-repeat. Nilainya
   
   • repeat;
   • repeat-x;
   •  repeat-y;
   • no-repeat;
   • inherit
6. background-clip dan -webkit-background-clip
   
   • border-box;
   • padding-box;
   • content-box;
7. background-origin. Nilai
   
   • border-box;
   • padding-box;
   • content-box;
8. background-size
   
   • 60px 80px = ukuran gambar
   • 12% 18% = persentase ke lebar
   • cover = ukuran sebesar lebar
   • contain = setinggi layar

HTML2FPDF Part 2

Melanjutkan tutorial sebelumnya. Kali ini saya akan menarik HTML sebelum menjadikannya PDF. Ada beberapa hal yang wajib dipastikan sebelum menjalankannya. Karena ini sangat penting!! mengingat HTML2FPDF sangat memperhatikan css, gambar dan lain-lain yang berhubungan dengan HTML.

Saya tidak meletakkan HTML2FPDF di tempat baru. Tapi saya langsung menaruhnya folder. Jadi tolong pastikan anda memperhatikan penempatan filenya.

FPDF sangat diperlukan disini. Pastikan memerika error bila tidak keluar seperti yang di inginkan.. Saya memberikan error_reporting (0); dimana error disembunyikan. Bila tidak ada output hadir, jadikan error_reporting(22); 
*22 = show all*

Tanpa basa-basi mari mencoba membuat PDF dengan memanggil HTML. Sebenarnya inti dari PDF ini adalah  memasukkan htmlnya ke variable lalu di buat PDF!

HTML2FPDF Part 1

Menggunakan HTML2FPDF tidaklah sulit. Kita cuma harus sedikit waspada dengan isi tulisannya. Kekurangan dari HTML2FPDF adalah tidak bisa menconversi GIF. Apabila anda memakai GIF untuk memanfaatkan alpha di gambarnya, ganti saja dengan PNG. Untuk mengambil HTML2FPDF, pergilah ke SOURCEFORGE (click disini)

konsep dasar HTML2FPDF adalah anda membuat HTML lalu HTML itu yang dijalankan. Ada 2 metode yang dapat di ajarkan.. yaitu

1. tulis HTML lalu dibuat jadi PDF (yang akan dibuat dibawah)
2. tarik HTML lalu dibuat PDF.

Nanti tutorial ini akan dimanfaatkan ke CI. saya akan memanfaatkan konsep pertama di CI.. tetapi satu hal yang perlu diketahui.. penempatan gambar di CI agak riskan, sehingga kita harus memberikan alamat full untuk gambarnya.