Senin, 31 Agustus 2015

(Pengalaman) Membuat Template CMS Lokomedia

Hari ini kita tidak akan membahas tentang cara membuat template untuk CMS Lokomedia. Khusus hari ini, saya ingin berbagi pengalaman (plus curhat dikit) setelah berhasil membuat template untuk CMS Lokomedia. Mungkin lain kali saja saya akan membagikan tutorial membuat template CMS Lokomedia. Karena jujur saja, lumayan melelahkan juga membuat template Lokomedia.
Mari kita awali cerita ini dari hari sabtu kemarin. Hari itu, kami diminta oleh pembimbing (mbah Suro) untuk membuat template Lokomedia. Kalau belum mampu untuk membuat template, mengobrak-abrik template yang udah ada juga tidak masalah. Karena yang terpenting itu kami bisa mempelajari struktur dan cara kerja dari CMS Lokomedia. Sejak saat itu, dimulailah misi kami.

Mbah sudah memberikan beberapa referensi, termasuk template yang bisa digunakan sebagai template lokomedia. Tapi, saya lebih tertarik untuk membuat template berdasarkan template Sandbox buatan Ahmad Nugraha. Karena kelihatannya lebih simpel.

Hal yang pertama kali saya pelajari adalah struktur template itu, dan... Wah! Ada banyak library javascript yang digunakan. Ternyata alur kerja template ini adalah memanggil bagian-bagian yang sudah dibuat sebelumnya di dalam tempate.php. Biar lebih mudah buat ngedit kalau ada error kali ya. Selain itu... Ini saya saja, atau membuat template ini rasanya seperti membuat website yang udah ada databasenya?

Jadi, hari sabtu saya menyelidiki struktur template sandbox lokomedia dan juga coding sedikit. Waktu itu saya putuskan untuk membuat template menggunakan bootstrap dan w3.css. Biar enggak terlalu pusing mikirin desainnya. Intinya, layout dan tampilan menggunakan bootstrap dan sedikit sentuhan dengan w3.css. Meski begitu, ada tambahan css sedikit dari saya sendiri agar lebih sesuai dengan gambaran saya. Tidak lupa saya membuat menu navigasinya.

Hari minggu liburan, jadi lanjut ke hari senin.

Hari senin (hari ini), saya melanjutkan coding template lokomedia saya. Sebenarnya, bisa dibilang saya ngedit template sandbox saja. Karena konsep dan query yang digunakan untuk menampilkan datanya saya ambil dari sana. Hanya saja, untuk tampilan dan objek yang digunakan berbeda. Jujur saja, meskipun saya bilang cuma ngedit, tapi tetep capek juga. Kita harus teliti dalam menyesuaikan script yang saya gunakan.

Hingga siang, akhrnya saya berhasil juga. Agak kurang puas sih, sebenarnya. Tapi, lumayan.



Sabtu, 29 Agustus 2015

Dasar YII2 : Obrak Abrik LayOut

Kemarin kita sudah bisa menginstall YII 2 hingga bisa :






Kali ini, kita akan mengubah tampilan index dan juga menunya. Karena kalau kita membuka index.php yang ada di folder web, kita tidak kan ngerti itu apa terus munculnya apa.

Hal pertama yang perlu kita ketahui bersama adalah, jangan terjebak dengan url. Script atau kode yang mempengaruhi index itu berada pada folder site yang bernama index.php. Tidak hanya itu, tampilan About, Contact dan juga Login juga berada pada folder site.

Baiklah, pertama-tama kita akan mengubah sedikit tampilan index. $this->title = 'My Yii Application' ini untuk judul atau title. Coba kita rubah menjadi $this->title = 'Ini Judul'; maka judulnya akan berubah.



Lalu <h1>Congratulations!</h1> kita ubah menjadi <h1>Selamat!</h1> sehingga menjadi seperti ini.




Objek lainnya dapat kalian otak-atik atau gonta-ganti sesuai dengan keinginan kalian. Baik itu index, about, contact, ataupun login. Silahkan berkreasi. Jika kalian tidak mengerti dengan class-class yang digunakan, silahkan belajar bootstrap. Karena class yang digunakan di sana merupakan class bootstrap. Jika kalian sudah menguasai bootstrap, akan lebih mudah kalian untuk mengeditnya.
tasinya.

Oh, iya. Jika anda memang tertarik dengan YII, saya sarankan membaca dokumentasinya di http://www.yiiframework.com/doc-2.0/guide-README.html

Kita sudah bisa merubah halaman-halamannya sesuai dengan keinginan kita nih. Tapi, header sama footernya kok gak ada ya? Kira-kira anda tahu di mana letak file yang berpengaruh pada header dan footer? Yup! Yaitu ada pada file main.php yang ada di folder layout.

Saya tidak akan memandu anda tentang apa saja yang bisa diedit, akan tetapi akan saya perlihatkan hasil editan saya.




Jangan takut denga error. Ketika mengubah, simpan dan lihat. Jika error tinggal di Ctrl+Z saja kan?

Selamat berkreasi...

Jumat, 28 Agustus 2015

Cara Mudah Menginstall Framework YII 2.0

Sebenarnya, ada banyak tutorial untuk menginstall atau memasang framework YII di luar sana. Tapi, kebanyakan yang dibahas mungkin cara menginstall framework YII 1.x. Bagaimana dengan YII 2.0?

Beberapa bulan yang lalu, tepatnya ketika bulan puasa, saya sudah belajar sedikit tentang framework YII. Waktu itu yang saya pelajari cuma menginstall YII di XAMPP, mengubah template, sama membuat CRUD sederhana bersama dengan database MySQL. Lumayan, sehari ngelahap semua itu. Sayangnya, sekarang sudah agak lupa. Jadi, mau belajar lagi nih ceritanya. Kemudian, sebuah permasalahan muncul. "Ini cuma perasaan saya atau cara nginstall YII 2 agak beda dengan YII yang dulu, ya?".

Karena itulah saya mau berbagi pada siapapun yang memiliki masalah dan pertanyaan seperti tadi. Tenang saja, di sini kita akan mengistall YII 2 dengan cara yang paling mudah.

Dari situs resminya, ada dua cara untuk mengistall YII. Yaitu menggunakan Compresor package manager atau dengan mengunduh file arsip secara langsung. Banyak yang lebih menyukai cara pertama, karena lebih mudah untuk menginstall/memasang ekstensi baru atau memperbarui YII hanya dengan perintah tunggal (dengan syarat terhubung ke internet tentunya). Tapi, gimana kalau lagi offline dan tidak ada koneksi internet? Kita akan menggunakan cara yang kedua (tapi tetep harus download file arsipnya lho).

1. Download YII di http://www.yiiframework.com/download/ dan klik link YII 2 with basic application template.



2. Ekstrak file tadi dan copy hasil ekstrakannya (folder basic) di folder yang bisa diakses oleh web (www atau htdocs).

Kalau kalian menggunakan windows, mungkin file yang didownload terlihat seperti file biasa. Namun bisa kalian ekstrak menggunakan WinRAR atau 7zip. Jika setelah diekstak ternyata hasilnya cuma satu file. Silahkan diekstrak lagi. Nanti akan ada folder (basic) yang isinya banyak. Itulah yang dipindahkan ke folder htdocs atau www.

3. Buka folder tadi (folder basic di htdocs atau www). Kemudian cari dan buka folder config. Buka file web.php menggunakan teks editor seperti notepad atau aplikasi sejenis. Cari kata 'cookieValidationKey' => '', dan isi. Mau diisi kata apapun juga boleh, tapi biar tidak ribet saya isi dengan kata melati. Sehingga menjadi 'cookieValidationKey' => 'melati', seperti gambar di bawah.




cookieValidationKey ini dibutuhkan untuk mem-validasi cookie kita. Jadi harus diisi ya.

4. Selesai! YII 2 sudah terinstall.

Silahkan buka http://localhost/basic/web/index.php. Jika berhasil, nanti akan muncul halaman seperti ini:



Jika halaman tidak mucul atau terjadi error, coba buka http://localhost/basic/requirements.php. Nanti akan kelihatan apakah kebutuhan yang diperlukan untuk menggunakan YII 2 sudah terpenuhi atau belum. Namun, yang terpenting adalah PHP yang digunakan minimal versi 5.4. Jika diperlukan, silahkan menginstall PDO PHP Extension dan driver database yang sesuai jika aplikasi yang akan dibuat menggunakan database.



Baiklah, kita sudah berhasil menginstall/memasang YII 2.0. Jika ada error atau sesuatu yang salah. Silahkan bertanya.

Kamis, 27 Agustus 2015

Membuat Laporan PDF Dengan FPDF Pada PHP

Pernahkah kalian merasa kesulitan membuat laporan pada aplikasi yang berbasis web? Karena biasanya, laporan yang ditunjukkan hanyalah halaman html yang otomatis di print. Tentu saja, ada banyak kelemahan membuat laporan dengan cara itu. Salah satunya adalah penomoran halaman. Di html kita tidak bisa memecah halaman dan memberi nomor halaman. Selain itu, tidak semua browser memberikan fitur print preview sehingga kita tidak bisa melihat apakah hasil yang akan dicetak sesuai atau tidak. Berbeda dengan Visual Basic atau Delphi yang memiliki Cristal Report.

Untuk mengatasi masalah tersebut, kita bisa membuat laporan dalam bentuk pdf menggunakan library php. Tentunya ini cukup memudahkan bagi para programmer web untuk membuat laporan yang lebih rapi, dan sesuai dengan kebutuhan dari aplikasi web yang sedang dibuat.

Ada banyak sekali library php yang bisa digunakan untuk membuat laporan dalam bentuk pdf. Tapi di sini kita akan sama-sama belajar membuat laporan menggunakan library FPDF.

Untuk mengawalinya, mari kita berkenalan dengan FPDF terlebih dahulu.

FPDF adalah PHP class yang memungkinkan untuk menghasilkan file PDF dengan PHP murni, artinya tanpa menggunakan library PDFLib. F dari FPDF singkatan Free. Anda dapat menggunakannya untuk setiap jenis penggunaan dan memodifikasi sesuai kebutuhan Anda.

FPDF memiliki keuntungan lain: fungsi tingkat tinggi. Berikut adalah daftar fitur utama:
  • Pilihan ukuran Unit, format halaman dan margin
  • Halaman header dan footer manajemen
  • Halaman otomatis istirahat
  • Otomatis istirahat garis dan teks pembenaran
  • Dukungan gambar (JPEG, PNG dan GIF)
  • Warna
  • Link
  • TrueType, Type1 dan dukungan encoding
  • Kompresi halaman
FPDF tidak memerlukan ekstensi (kecuali zlib untuk mengaktifkan kompresi dan GD untuk dukungan GIF). Ia bekerja dengan PHP 4 dan PHP 5 (versi terbaru membutuhkan setidaknya PHP 4.3.10).

Baiklah. Setelah kita kenalan dengan FPDF sekarang kita akan memasang FPDF itu pada projek aplikasi web kita. Tapi, sebelum itu unduh dulu FPDF di http://fpdf.org/en/download.php. Pilih versi yang ingin kalian unduh, kemudian tekan link ZIP yang ada di bawahnya. Versi terbaru dari FPDF ketika saya menulis ini adalah v1.7.



Sebenarnya, di dalam file yang kita unduh tadi sudah ada referensi perintah-perintah yang digunakan dalam FPDF dan juga tutorialnya. Tentu saja berbahasa inggris. Kalau mau referensi yang berbahasa indonesia, ada juga kok. Tinggal tekan link seperti dalam gambar.


Memasang FPDF

Setelah kita mengunduh FPDF, ektrak file zip itu dan salin hasil ekstak itu ke dalam folder projek kita. Oh, iya. Pastikan komputer atau laptop yang kita gunakan sudah terinstall aplikasi untuk membaca file PDF seperti Foxit Reader atau Adobe Acrobat agar browser bisa menampilkan dokumen PDF dengan baik.

Menggunakan FPDF 

Untuk sampel pertama, kita akan membuat sebuah kalimat sederhana menggunakan FPDF.

<?php
require('FPDF/fpdf.php');  //pastikan path atau alamat FPDF sesuai
$pdf = new FPDF();
$pdf->AddPage();  //membuat halaman baru
$pdf->SetFont('Arial','B',16);  //memilih font Arial Bold dengan ukuran 16pt
$pdf->Cell(40,10,'Selamat Datang di FPDF!'); //membuat sebuah cell dengan panjang 40 dan tinggi 10
                                             //yang berisi tulisan 'Selamat Datang di FPDF'

$pdf->Output();  //hasilnya dicetak
?>

Dan hasilnya sebagai berikut.


Membuat Header, Footer, Penomoran Halaman dan Gambar

Perhatikan script berikut :

<?php
require('FPDF/fpdf.php');

// kita akan membuat class baru yang mewarisi sifat dari class FPDF
// tujuannya agar lebih memudahkan editing
class PDF extends FPDF{
// function Header dan Footer akan otomatis dipanggil untuk membuat header dan footer

  function Header()
  {
      // logo atau gambar, 
      // 'logo.php' di bawah berarti path atau alamat gambar
      // dengan panjang posisi X = 10, Y = 6, dan panjang 30 
      $this->Image('logo.png',10,6,30);
      // arial bold 15
      $this->SetFont('Arial','B',15);
      // membuat cell kosong dengan panjang 80
      $this->Cell(80);
      // judul
      $this->Cell(30,10,'Ini Judul',1,0,'C');
      // line break dengan tinggi 20
      $this->Ln(20);
  }

  function Footer()
  {
      // mengatur posisi 1,5 cm ke bawah
      $this->SetY(-15);
      // arial italic 8
      $this->SetFont('Arial','I',8);
      // penomoran halaman
      $this->Cell(0,10,'Page '.$this->PageNo().'/{nb}',0,0,'C');
  }
}

$pdf = new PDF();
$pdf->AliasNbPages(); // fungsi untuk mengitung jumlah total halaman
$pdf->AddPage(); // membuat halaman
$pdf->SetFont('Times','',12); // Times 12

// pengulangan agar dokumen ada isinya dan kelihatan penomorannya
for($i=1;$i<=40;$i++){
  $pdf->Cell(0,10,'Baris dalam dokumen yang ke '.$i,0,1);
}

$pdf->Output(); // menampilkan hasil...
?>
Silahkan perhatikan kode di atas. Sudah ada komentar yang saya sisipkan pada kode.

Hasilnya adalah:




FPDF Dengan MySQL

Saya memiliki tabel yang bernama tbl dalam database data, dan saya akan menampilkan seluruh data yang ada dalam tabel tbl. Perhatikan script berikut:

<?php
// pendefinisian folder font pada FPDF
define('FPDF_FONTPATH', 'FPDF/font/');
require('FPDF/fpdf.php');

// seperti sebelunya, kita membuat class anakan dari class FPDF
 class PDF extends FPDF{

  function Header(){
   $this->Image('logo.png',1,1,2.25); // logo
   $this->SetTextColor(128,0,0); // warna tulisan
   $this->SetFont('Arial','B','12'); // font yang digunakan
   // membuat cell dg panjang 19 dan align center 'C'
   $this->Cell(19,1,'LAPORAN SISWA',0,0,'C');
   $this->Ln();
   $this->Cell(19,1,'Sekolah Sementara',0,0,'C');
   $this->Ln();
   $this->SetFont('Arial','B','9');
   $this->SetFillColor(192,192,192); // warna isi
   $this->SetTextColor(0,0,0); // warna teks untuk th
   $this->Cell(6);
   $this->Cell(1,1,'No','TB',0,'L',1); // cell dengan panjang 1
   $this->Cell(1,1,'Kode','TB',0,'L',1); // cell dengan panjang 1
   $this->Cell(2,1,'Nama','TB',0,'L',1); // cell dengan panjang 2
   $this->Cell(3,1,'Alamat','TB',0,'L',1); // cell dengan panjang 3
   // panjang cell bisa disesuaikan
   $this->Ln();
  }

  function Footer(){
   $this->SetY(-2,5);
   $this->Cell(0,1,$this->PageNo(),0,0,'C');
  } 
 }

 $server = "localhost";
 $user = "root";
 $pass = "";
 $data = "data";

 $net = new mysqli($server, $user, $pass, $data);

 if($net->connect_error){
  die("Koneksi gagal: ".$net->connect_error);
 }

 $q = "select * from tbl";
 $h = $net->query($q) or die($net->error);
 $i = 0;
 
 while($d=$h->fetch_array()){
  $cell[$i][0]=$d[0];
  $cell[$i][1]=$d[1];
  $cell[$i][2]=$d[2];
  $i++;
 }
 // orientasi Potrait
 // ukuran cm
 // kertas A4
 $pdf = new PDF('P','cm','A4');
 $pdf->Open();
 $pdf->AliasNbPages();
 $pdf->AddPage();

 $pdf->SetFont('Arial','','8');
 //perulangan untuk membuat tabel
 for($j=0;$j<$i;$j++){
  $pdf->Cell(6);
  $pdf->Cell(1,1,$j+1,'B',0,'C');
  $pdf->Cell(1,1,$cell[$j][0],'B',0,'C');
  $pdf->Cell(2,1,$cell[$j][1],'B',0,'L');
  $pdf->Cell(3,1,$cell[$j][2],'B',0,'L');
  $pdf->Ln();
 }

 $pdf->Output(); // ditampilkan

?>
Dan hasilnya...




Saya rasa sudah cukup yang saya sampaikan. Tutorial lengkap silahkan kunjungi http://fpdf.org/en/tutorial/index.php, walaupun bahasa inggris ya. Tapi, jika ada pertanyaan jangan sungkan untuk bertanya atau komen.

Rabu, 26 Agustus 2015

Menyimpan Data dari textarea TinyMCE Menggunakan MySQL

Bagaimana caranya menyimpan teks yang ditulis pada textarea WYSIWYG TinyMCE?

Pertama, buat tabel tiny di database db_tiny dengan struktur sebagai berikut:

Field Type Length Extra Primary
id_berita INT 5 auto_increment
judul VARCHAR 100
isi TEXT

Kemudian buat sebuah file tiny.php dengan skrip seperti berikut:

<?php
if(isset($_POST['simpan'])){
 $isi = addslashes($_POST['isi']);

 mysql_connect("localhost","root","");
 mysql_select_db("db_tiny");

 mysql_query("insert into tiny(judul, isi) values('$_POST[judul]','$isi')");
}
?>
<!doctype html>
<html>
<head>
 <title>TinyMCE MySQL</title>
 <script type="text/javascript" src="tinymce/tinymce.min.js"></script>
 <script type="text/javascript">
 tinymce.init({
     selector: "textarea",
     plugins: [
         "advlist autolink lists link image charmap print preview anchor",
         "searchreplace visualblocks code fullscreen",
         "insertdatetime media table contextmenu paste"
     ],
     toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
 });
 </script>
</head>
<body>

<form method="post" action="">
Judul : <input type="text" name="judul" maxlength="50">
<br><br>
isi Berita :<br>
<textarea name="isi" rows="15" cols="80">

</textarea>
<br>
<input type="submit" name="simpan" value="Simpan">
<input type="reset" value="Batal">
</form>

</body>
</html>


Baiklah, waktunya penjelasan.

1. Pada tabel, data yang akan menampung data dari textarea harus bertipe TEXT. Kalau VARCHAR, masih kurang mencukupi.

2. Ketika menyimpan ke MySQL, harus diberi addslashes agar kalau ada tanda petik dua (") tidak menyebabkan error pada saat eksekusi query tersebut.

Itu saja, kalau ada yang kurang dipahami silahkan bertanya.

Selasa, 25 Agustus 2015

Mengenal, Memasang dan Menggunakan Font Awesome

Pernahkah kita kebingungan mencari icon-icon untuk blog atau website?  Entah yang kita cari itu icon user, icon menu, atau icon sosial media. Pokoknya, icon itu berperan cukup penting dalam mempercantik tampilan sebuah web. Jika kita mencari icon di google.com, maka kita perlu mendownload satu per satu gambar yang akan digunakan. Kalau cuma beberapa icon sih tidak masalah, tapi bagaimana kalau kita akan menggunakan puluhan icon?

Untuk itu, kali ini saya ingin mengenalkan pada kalian yang belum kenal dengan "Font Awesome". Pernah dengar tentang Font Awesome?

Singkat saja, Font Awesome adalah font icon yang dapat dipanggil menggunakan css. Font Awesome dibuat oleh Dave Gandy dalam GitHub Project. Kita dapat mengunjungi halaman resminya di http://fortawesome.github.io/Font-Awesome/

Timbul, pertanyaan. Apa aja sih yang ia bisa?


Baik-baik, kemampuan Font Awesome meliputi :

  • 1. Satu font, tapi berisi banyak icon. Icon yang adapun saya rasa sudah cukup lengkap.
  • 2. Tidak memerlukan sintaks JavaScript dalam pengaplikasiannya.
  • 3. Icon menggunakan gambar Scalable Vector Graphics (SVG) sehingga kualitas gambar tetap terjaga dalam berbagai ukuran.
  • 4. Gratis. Yang paling penting adalah... Font Awesome itu gratis.
  • 5. Style dapat dimodifikasi menggunakan css. Seperti mengganti warna, ukuran, shadow dan apapun yang mungkin menggunakan css.
  • 6. Cocok digunakan pada tampilan resolusi tinggi.
  • 7. Meskipun pada awalnya dibuat untuk Bootstrap, namun tetap bisa digunakan pada semua framework.
  • 8. Dapat digunakan pada dekstop.
  • 9. Mudah dideteksi pada layar.
Saya anggap, kita semua sudah mengenal Font Awesome. Nah, sekarang~

Timbul, pertanyaan. Bagaimana kita menginstal atau memasang Font Awesome? 

Ada beberapa cara yang bisa kita gunakan untuk memasang Font Awesome. Tapi, saya akan menjelaskan dua cara saja. Satu untuk online dan satu untuk offline.

1. Menggunakan BootstrapCDN dari MaxCDN

Ini adalah cara yang paling mudah. Tidak perlu mendownload atau menginstall apapun. Cukup menambahkan satu baris kode html di dalam tag <head> pada website kita.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Dengan satu syarat, yaitu harus online.

2. Menggunakan CSS

Kalau ini cara biasa. Di netbook saya, saya bisa menggunakan Font Awesome meskipun offline. Tapi, kadang ada icon tertentu yang tidak mau nampil dan saya kurang tahu mengapa.

Pertama, download Font Awesome di http://fortawesome.github.io/Font-Awesome/. Tekan tombol download, lalu akan muncul sebuah modalbox, tekan tombol download yang ada.


Kemudian ekstrak file zip-nya, dan copy ke dalam folder projek kita.
Lalu tambahkan font-awesome.min.css dalam tag <head> pada projek kita.

<link rel="stylesheet" href="path/font-awesome/css/font-awesome.min.css">
Pastikan path atau alamat benar, dan Font Awesome sudah terpasang.

Bagaimana menggunakan Font Awesome?

Cara menggunakannya tidak sulit kok. Cukup tambahkan class="fa fa-icon" dan atur ukuran dan warna menggunakan css. Contoh :

<!doctype html>
<html>
<head>
  <title>Contoh Font Awesome</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body> 
  <a href="#" class="fa fa-ambulance" style="color:gray;font-size:100px;"></a>
</body>
</html>
Dan hasilnya adalah

Daftar icon yang bisa digunakan bisa kalian lihat pada halaman http://fortawesome.github.io/Font-Awesome/icons/

Cukup sekian yang kita pelajari tentang Font Awesome. Kalau ada pertanyaan, jangan ragu untuk bertanya. Arigatou...

Senin, 24 Agustus 2015

Mengenal Editor WYSISYG TinyMCE

Pernah mendengar tentang editor WYSISYG?

Baiklah, WYSIWYG adalah singkatan dari What You See Is What You Get yang artinya apa yang kamu lihat adalah apa yang kamu dapatkan. Menurut Wikipedia, editor WYSISYG adalah suatu sistem di mana konten (teks dan grafis) pada layar selama proses editing muncul dalam bentuk erat sesuai dengan penampilan saat dicetak atau ditampilkan sebagai produk jadi, seperti dokumen, halaman web, atau slide presentasi.

Timbul, pertanyaan. Editor WYSIWYG itu gunanya buat ngapain, sih?

Bayangkan kita adalah seorang programmer yang ingin membuat sebuah website berita. Tentunya programmer harus bisa memberikan website dengan antarmuka yang mudah digunakan oleh reporter dalam menuliskan isi beritanya. Untuk memenuhi hal itu, biasanya disediakan texarea yang memungkinkan user untuk mengetik lebih dari satu baris.

Sayangnya, teks yang berada di dalam textarea tidak bisa diformat, seperti dimiringkan, ditebalkan, atau diatur ukuran hurufnya pada kalimat tertentu. Kecuali user hafal perintah HTML dan menuliskannya secara manual di dalam textarea tersebut. Tentunya ini sangat menyulitkan bagi reporter ataupun user yang awam dengan HTML.

Jalan keluarnya adalah menggunakan editor WYSIWYG (What You See Is What You Get). Editor WYSIWYG akan memudahkan user dalam mengisi konten website layaknya menggunakan aplikasi pengolah kata(Microsoft Word atau Open Office).

Lagi-lagi, timbul pertanyaan. Editor apa aja sih yang termasuk WYSIWYG dan gimana dapetinnya? Cara nginstalnya gimana? Gunainnya gimana? Implementasinya di web gimana? Waduh~ Sabar ya...

Ada bayak editor WYSIWYG yang bisa kita pakai. Kalau nanya mbah google, nanti pasti akan nongol banyak, seperti :


Dari pada bingung mau pilih yang mana, kali ini saya akan menggunakan TinyMCE dan sedikit membahas editor WYSIWYG tersebut.

Instalasi atau Pemasangan TinyMCE

Sebelum menggunakan TinyMCE rasanya kurang afdhol kalau kita tidak mengenal TinyMCE terlebih dahulu. Jadi... menurut halaman awal TinyMCE...

TinyMCE adalah platform web independen berdasarkan Javascript HTML editor WYSIWYG kontrol dirilis sebagai Open Source di bawah LGPL.
TinyMCE memiliki kemampuan untuk mengkonversi bidang TEXTAREA HTML atau elemen HTML lainnya untuk kasus redaksi.
Intinya, TinyMCE merubah textarea standar menjadi sebuah editor WYSIWYG. Adapun langkah-langkah pemasangan dan penggunaannya adalah sebagai berikut :

Download TinyMCE di http://www.tinymce.com/download/download.php (pilih yang deskripsinya "Contains all you need for production usage" dan tekan tombol download di samping kanannya)



Ekstrak file zipnya, kemudian pindahkan hasil ekstrak tersebut (tinymce) ke folder htdocs (atau folder projek kalian).

Lalu pasang masukkan file tinymce.min.js dari tinymce ke dalam file html atau php kalian. Contohnya, kita akan membuat sebuah file yang bernama tini.html di htdocs dengan script :

<!doctype html>
<html>
<head>
  <title>Contoh</title>
  <script src="tinymce/js/tinymce/tinymce.min.js"></script>
  <script>
    tinymce.init({selector:'textarea'});
  </script>
</head>
<body>
  <textarea>Easy! You should check out MoxieManager!</textarea>
</body>
</html>

Bagian yang saja warnai adalah bagian untuk memanggil tinymce.min.js. Bagian ini perlu disesuaikan dengan alamat atau path dari file tinymce.min.js tersebut.

  <script>
    tinymce.init({selector:'textarea'});
  </script>

Sedangkan script tinymce.init({selector:'textarea'}); digunakan untuk menempatkan editor WYSIWYG ke dalam textarea. Jangan lupa dengan <!doctype html> yang berada paling atas. Tanpa itu, editor ini tidak bisa digunakan.

Hasilnya seperti berikut :


Tapi, itu belum kelihatan semua fiturnya lho! Karena di atas kita menggunakan cara yang paling mudah. Bagaimana kalau mau yang standar? Cukup ubah

  <script>
    tinymce.init({selector:'textarea'});
  </script> 
Menjadi

  <script>
    tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
    });
  </script> 
Dan hasilnya agak beda :



Kalau mau yang full fiturnya, ganti

  <script>
    tinymce.init({selector:'textarea'});
  </script>
Menjadi

  <script>
    tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern imagetools"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
  });
  </script>
Dan tampilan semua fiturnya seperti ini :





Bagaimana? Menarik? Menurut saya, fitur yang disediakan oleh TinyMCE sudah terbilang memadahi. Sayangnya, plugins untuk Upload File atau File Manager yang tersedia berbayar. Jadi tidak bisa tinggal pasang gambar, langsung terupload. Salah satu solusinya adalah menggunakan Responsive File Manager yang dapat diunduh di http://www.responsivefilemanager.com.

Lain kali kita akan membahas tentang menyimpan hasil dari editing menggunakan TinyMCE ke dalam database MySQL. Sampai jumpa lagi...

 Kalau ada yang tidak anda pahami, jangan sungkan untuk bertanya.

Sabtu, 22 Agustus 2015

Prinsip Gonta-ganti Template CMS Lokomedia

Di CMS Lokomedia, terdapat fitur untuk berganti template sesuka hati. Meskipun tadi dibilang sesuka hati, tapi tergantung template yang tersedia. Yang penting otomatis. Tinggal klik, dan template udah berubah. Terus, gimana sih caranya buat template yang bisa diganti-ganti begitu? Tertarik?

Kali ini, saya tidak akan menunjukkan bagaimana cara pembuatannya. Tapi, yang lebih penting dari itu. Saya akan menjelaskan bagaimana prinsip dari gonta-gantinya template pada CMS Lokomedia.

Pertama, terdapat sebuah tabel dengan struktur seperti berikut

FieldTypeLengthExtraPrimary
id_template INT 5 auto_increment
judul VARCHAR 100
pembuat VARCHAR 50
folder VARCHAR 100
aktif int 1

Id_templates digunakan sebagai primary key. Judul sebagai judul atau nama template. Pembuat untuk nama pembuat template. Folder berisi path (alamat) di mana template bisa diakses. Aktif digunakan sebagai penanda apakah template tersebut sedang aktif (bernilai 1) digunakan atau tidak (bernilai 0). Sistem akan menggunakan salah satu template yang aktif bernilai 1.

Kemudian terdapat sebuah folder untuk menyimpan template-template yang akan digunakan. Sebagai contoh, nama foldernya adalah "templates" dan berisi template dengan nama masing-masing "red" dan "blue". Baik "red" maupun "blue" ini juga merupakan folder yang berisi file-file yang dibutuhkan template tersebut. Mulai dari file css, javascript sampai gambar.

Lebih mudahnya, di dalam folder "templates" terdapat dua folder, yaitu "red" dan "blue", yang berisi file-file yang dibutuhkan template tersebut.

Jika saya ingin membuat template dengan nama "ijo". Maka saya harus membuat folder "ijo di dalam folder "templates", dan mengisi folder "ijo" dengan file-file yang dibutuhkan template saya.

Di dalam "templates" terdapat sebuah file php, sebagai contoh namanya media.php,  yang bertugas untuk memilih template berdasarkan data di database. Dan di dalam folder template(seperti red, blue dan ijo) terdapat file php, sebagai contoh namanya template.php, yang bertugas untuk memanggil file-file yang dibutuhkan untuk template.

Logikanya seperti ini :
  • Ketika sebuah halaman dipanggil, maka media.php (harus) ikut terpanggil.
  • media.php akan memilih nama dan tempat di mana folder template tersebut berada berdasarkan data di database.
  • Saat template yang aktif sudah terpilih, misalnya ijo, maka file template.php yang ada di folder ijo akan terpanggil.
  • File template.php yang berada di sana akan memanggil file-file yang dibutuhkan oleh template.
  • Setelah itu, template akan terpasang pada halaman web tersebut.
Note : harus ada satu dan hanya satu template yang aktif di database.

Tidak terlalu rumit bukan? Jika kita sudah mengetahui alurnya, maka yang perlu kita kerjakan adalah merealisasikannya. Bagaimana cara untuk merealisasikannya adalah pilihan masing-masing.

Cukup sekian yang saya sampaikan. Apabila ada keluhan, kritik, saran atau komentar, silahkan tulis di tempat yang telah disediakan. Wassalam dan selamat malam.

Jumat, 21 Agustus 2015

Membuat Template Bootstrap Tanpa Coding 2 Menit

Jika kalian sudah berkecimpung dalam dunia coding website terlebih seorang desainer web pasti sudah akrab dengan yang namanya template website. Karena pekerjaan utama seorang desainer web (yang saya tahu) adalah membuat desain-desain template. Tidak mungkin kita menggunakan satu template untuk berbagai website yang kebutuhan dan fungsi-nya beragam. Untuk itulah, diperlukan sorang desainer web yang handal guna menyesuaikan template suatu web dengan fungsinya.

Ngomong-ngomong, template itu apa sih? Ada yang tahu?

Mungkin agak susah ya? Atau ada yang tahu tapi tidak bisa jelasinnya? Itu mah sama aja. So, template web adalah tampilan web (that's my opinion). Kalau tidak yakin dengan jawaban saya, silahkan tanya mbah google.

Jadi inget waktu awal-awal belajar html. Waktu disuruh buat layout sederhana pake tabel, terus buat layout pake div ama css, disuruh buat form, setelah beberapa lama belajar css kemudian disuruh buat website statis tentang diri sendiri. Masih ingatkah dengan masa-masa itu? Nostalgia, stop!

Bagi sebagian besar programmer web (terlebih yang belum ahli), membuat template web adalah salah satu hal yang banyak menyita waktu, tenaga dan pikiran. Mulai dari mikir layout-nya gimana, warnanya apa dan fiturnya apa aja? Saya-pun masih begitu sampai ... tadi. Sekarang sudah tidak lagi.

Peringatan penting!

Apa yang akan saya sampaikan, berkaitan dengan css framework bootstrap. Jadi, silahkan pelajari bootstrap (tidak perlu sampai ahli, yang penting ngerti) terlebih dahulu.

So, bagaimana cara membuat template bootstrap tanpa coding yang saya maksud? Silahkan simak dengan serius!

1. Hal pertama yang anda perlukan adalah "satu set komputer" atau laptop atau netbook dan juga akses internet. Karena apa yang akan saya sampaikan ini mengharuskan anda sekalian untuk terhubung ke-internet.
2. Buka situs www.layoutit.com, silahkan daftar kalau perlu(kalau gak perlu, ya gak usah).
3. Jika anda sekalian baru pertama kali kesini, saya sangat  menyarankan untuk melihat video demo terlebih dahulu (klik tombol watch a demo) dan akan terlihat video demo dari youtube.com. Silahkan tonton langsung atau download.
4. Jika sudah melihat video tersebut, silahkan bereksperimen membuat template bootstrap dengan meng-klik tombol start now.
5. Silahkan bereksperiment. Untuk awal mula, saya perkenankan meniru apa yang ada di video tersebut.
6. Tekan tombol preview yang ada di atas untuk melihat hasil template anda.
7. Jika anda sudah puas dengan template yang anda buat, silahkan klik tombol download untuk menyimpan template yang telah anda buat tadi.

Kecepetan? Atau bingung sama fitur-fiturnya? Karena itu saya sarankan untuk belajar bootstrap terlebih dahulu. Kalau kalian sudah bisa bootstrap, maka tentu tidak akan sulit untuk memahami alur kerja pembuatan template instant dengan layoutit.com

Note :
Jika anda sudah terbiasa, maka bukan tidak mungkin anda bisa membuat template website hanya dalam waktu 30 detik.

Sekian dan terima kasih!
Kalau ada pertanyaan, silahkan komen aja.

Kamis, 20 Agustus 2015

Mengenal dan Menangkal SQL Injection

SQL Injection dapat merusak database kita. Itulah hal penting yang harus kita ketahui sebelumnya. Jadi, saya akan berbagi pengetahuan tentang SQL Injection yang sudah saya miliki.

Apa itu SQL Injection?

SQL Injection adalah suatu teknik yang memungkinkan pengguna nakal untuk menyuntikkan atau memasukkan perintah SQL ke dalam pernyataan SQL, melalui inputan yang ada pada halaman web. Perintah SQL yang disuntikkan dapat mengubah pernyataan SQL dan mengganggu keamanan aplikasi web.

Contohnya, dengan teknik ini seseorang bisa saja masuk (login) ke dalam sistem tanpa harus memiliki akun(username dan password). Bukan hanya itu saja, SQL Injection juga memungkinkan seseorang untuk memanipulasi (create, read, update, delete) suatu data dalam database... berbahaya bukan?

Beberapa teknik SQL Injection

Kita tidak akan membahas teknik SQL Injection terlalu banyak, karena ilmu security saya masih cetek. Jadi, kita akan membahas yang umum saja.

OR 1=1 itu selalu benar

1=1 itu benar, karena satu memang satu. Iya, kan?

Sebagai contoh, coba kita katakan kalau tujuan kode SQL dibuat adalah untuk memilih user yang telah diberikan user id. Jika tidak ada yang mencegah pengguna untuk memasukkan inputan yang 'salah', pengguna dapat memsukkan inputan yang 'pintar' seperti :

Username

Maka perintah SQL yang akan dieksekusi adalah

SELECT * FROM user WHERE username='' OR 1=1
Arti dari pernyataan SQL berikut adalah memilih semua kolom dari tabel user dimana username kosong atau 1=1.Dengan kata lain, username apapun akan dianggap benar dan dapat memasuki sistem.

OR "="sama dengan TRUE

Bayangkan ada sebuah form untuk mem-verifikasi user login ke sebuah situs web.


Username :
Password :

Dan kode php untuk verifikasinya seperti ini

sql = "SELECT * FROM user WHERE username='".$_POST['username']."' AND password='".$_POST['password']."'"

Seorang hacker pintar bisa saja mendapatkan akses username dan password dalam database hanya dengan memasukkan "or""=" pada username dan password. Sehingga hasilnya seperti berikut:

sql = "SELECT * FROM user WHERE username=""or""="" AND password=""or""=""

Hasil pernyataan SQL di atas valid, dan akan menampilkan seluruh baris yang ada dalam tabel user karena ""="" selalu bernilai TRUE.

 SQL Batched

Kebanyakan database mendukung SQL Batched, yang dipisahkan dengan titik koma (;).

Bayangkan jika anda mempunyai inputan seperti berikut

userid


Dan akan menghasilkan pernyataan seperti berikut:

SELECT * FROM user WHERE username=105;DROP TABLE nama_tabel

Meskipun pengguna tidak berhasil memasuki sistem, akan tetapi pengguna akan menghapus tabel nama_tabel dari database.

Perlindungan

 Salah satu cara untuk melindungi serangan SQL Injection adalah dengan menggunakan parameter SQL. Parameter SQL adalah nilai-nilai yang ditambahkan ke dalam sebuah query SQL ketika dieksekusi, dengan cara yang terkendali.

Untuk php non-OOP, dapat menggunakan mysql_real_escape_string(). Sedangkan php OOP yang menggunakan pdo menggunakan cara berikut :

$stmt = $dbh->prepare("INSERT INTO Customers (CustomerName,Address,City)
VALUES (:nam, :add, :cit)");
$stmt->bindParam(':nam', $txtNam);
$stmt->bindParam(':add', $txtAdd);
$stmt->bindParam(':cit', $txtCit);
$stmt->execute();

Untuk php OOP yang menggunakan mysqli, mirip dengan yang pdo di atas.


--------
Untuk referensi, silahkan kunjungi https://en.wikipedia.org/wiki/SQL_injection
Sekian, kalau ada pertanyaan jangan malu untuk bertanya.

Rabu, 19 Agustus 2015

ID dan CLASS pada CSS

Kita akan membahas mengenai id dan class yang ada pada css nih. Saya anggap anda sekalian sudah paham sintaks css dan html.

Pertama, apa itu id dan class di css? Jawabannya simpel, id dan class itu merupakan selector css (saya rasa). Sebagai alternatif, kalau selector menggunakan elemen html dirasa terlalu ribet. Sebagai contoh, kalau ada script html seperti ini

<div>
  <h1>Header1</h1>
  <div>
    <h1>Header2</h1>
  </div>
</div>
Maka, kalau kita hanya ingin mengakses <h1>Header2</h1> maka tidak mungkin kita menggunakan css

div h1{
  ...
}

Karena akan berpengaruh baik pada <h1>Header1</h1> maupun <h1>Header2</h1>. Di sinilah kita bisa menggunakan id ataupun class, dengan catatan: "sesuai kebutuhan".

Selector ID


Selector id digunakan untuk menandai element yang unik. Maksudnya, satu nama id hanya bisa digunakan oleh satu elemen saja. Jika dalam satu halaman web ada elemen yang memiliki nama id sama, maka id hanya akan berpengaruh pada id yang pertama saja. Selector id pada css ditandai dengan "#" (tanpa tanda kutip).
Contoh :

#id1{
  ...Kode CSS... 
}

Sedangkan pada bagian html-nya, misalnya pada header, maka ditulis

<header id="id1">Ini Header</header>

Untuk penulisan nama id, saya sarankan diawali dengan huruf.

Selector Class 

Selector class digunakan untuk menandai elemen-elemen dengan kriteria tertentu pada halaman web. Berbeda dengan selector id yang hanya bisa digunakan oleh sebuah elemen, selector class bisa digunakan oleh elemen manapun. Maksudnya, sebuah selector class bisa dipanggil oleh berbagai elemen pada saat bersamaan. Bahkan, sebuah elemen html bisa memanggil lebih dari satu nama selector class, dengan catatan beberapa class yang dipanggil tidak saling bertentangan style-nya. Selector class ditandai dengan tanda titik "." (tanpa tanda kutip).
Contoh :

.class1{
  ..Kode Css..
}

Sedangkan pada elemen html-nya, misalnya div.

<div class="class1">Ini kotak div</div>

Kalau digunakan pada elemen footer, maka :

<footer class="class1">Ini footer</footer>

Sama seperti id, saya sarankan huruf pertama nama class adalah huruf. Sekalian untuk mempermudah mengingat.

Sekarang, bagaimana caranya satu element html mengakses beberapa class sekaligus?
Pertama, kita bayangkan ada beberapa class pada css seperti berikut :

.latar-hitam{
  background-color: #000;
}
.text-putih{
  color: #fff;
}
.padding16{
  padding: 16px;
}
Kemudian ada sebuah paragraf yang akan menggunakan class .layar-hitam .text-putih dan .padding16
Cara memanggil beberapa class itu cukup dengan menambahkan nama class-nya dan dipisahkan dengan spasi menjadi class="layar-hitam text-putih padding16"

<p class="layar-hitam text-putih padding16">Paragraf</p>
Dengan begitu, paragraf itu akan memiliki background hitam sesuai dengan .layar-hitam, teks berwarna putih sesuai .text-putih dan padding 16px sesuai .padding16

Ada pertanyaan? Silahkan komentarnya.
Semoga Bermanfaat...

Selasa, 18 Agustus 2015

Membuat CSS Framework Sendiri

 Pernahkah terpikirkan dalam benak kalian untuk membuat sebuah css framework sendiri? Sayang sekali jika anda tidak pernah berpikir untuk membuatnya, karena saya ketika pertama kali bertemu dengannya langsung ingin membuat versi saya sendiri. Tentu saja itu bukan hal yang mudah untuk dilakukan. Tapi, bukan pula hal yang mustahil untuk anda dan saya lakukan.
Keinginan untuk membuat css framework semakin kuat ketika saya mengenal yang namanya w3.css. Kalau mau buat css framework sekelas bo*tstrap, saya rasa terlalu banyak kodenya (dan mungkin lumayan rumit). Tapi kalau yang mirip-mirip sama w3.css mungkin bisa.

Konsep dari css framework yang akan kita buat ini hanya pemanggilan class, itu saja. Berhubung sebuah elemen html bisa memanggil lebih dari satu class. Silahkan pelajari w3.css atau pahami pemanggilan class di html. Karena di sini, saya tidak akan menjelaskan secara rinci pembuatan css framework akan tetapi hanya memberikan tips dan masukan yang mungkin saja berguna.

Yang anda perlukan untuk membuat css framework adalah :
  1. Pemahaman tentang css yang memadahi

     Ini sangat penting, karena jika kalian tidak paham css maka kemungkinan besar css framework yang akan kalian buat tidak akan pernah selesai. Namanya juga css framework, jadi ya harus ngerti css dulu. Mulai dari selector sampai transisi dan animasi css. Tapi yah, kembali lagi kepada diri kalian sendiri.
  2. Tentukan apa saja kemampuan css framework yang akan kalian buat

     Kalau mau buat css framework, tentu harus ada kemampuan dari framework tersebut yang bisa memudahkan kita untuk membuat tampilan website bukan? Seperti warna, bentuk, responsif, transisi dan animasi, dll. Penentuan kemampuan framework ini akan menjadi acuan ketika kalian mulai ngoding css framework yang kalian buat. Untuk awal-awal, jangan terlalu WOW dulu. Sesuai kemampuan yang sudah ada saja.
  3. Mulai dari yang sederhana

    Ketika membuat css framework, mulailah dari yang paling sederhana. Seperti warna, margin, padding, atau font. Barulah secara bertahap, selesaikan bagian yang sulit.
Itu saja dahulu. Yang paling penting dari "make something" adalah ulet dan tekun plus kerja keras.
Jika ada yang ingin ditanyakan, silahkan komentar ... Jangan malu. Karena saya yakin, ia tertutupi.

Senin, 17 Agustus 2015

Membuat segitiga dengan css

Kali ini kita akan membuat segitiga dengan css. Membuat segitiga dengan css tidak sulit, hanya perlu sedikit pemahaman mengenai css border. Langsung saja, pertama kita akan membuat segitiga sama kaki berdiri.

html-nya.

<div class="atas"></div>
sedangkan css-nya.

.atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-left: 30px solid tranparent;
  border-right: 30px solid tranparent;
}
Hasilnya:

Dengan div yang sama, kalau kita ingin membuat segitiga terbalik tinggal ganti css

border-bottom: 50px solid black;

Menjadi...

border-top: 50px solid black;

Dan hasilnya.

Intinya, kalau ingin membuat segitiga ke atas jangan kasih border-top, tapi kasih border-bottom. Sedangkan kalau ingin membuat segitiga ke bawah jangan kasih border-bottom, tapi border-top. Begitu juga kalau mau membuat segitiga yang mengarah ke samping kiri ataupun kanan.
Contoh :

<div class="kiri"></div>
<div class="kanan"></div>
css-nya

.kiri{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 30px solid tranparent;
  border-bottom: 30px solid tranparent;
  border-right: 50px solid black;
}

.kanan{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 30px solid tranparent;
  border-bottom: 30px solid tranparent;
  border-left: 50px solid black;
}

Hasilnya...
Bisa kita lihat baik width ataupun height-nya nol. Jadi, besar kecilnya ukuran segitiga ditentukan oleh seberapa besar atau tebal border yang digunakan.

Bagaimana kalau mau membuat segitiga yang arahnya ke sudut?

<div class="kiri-atas"></div>
<div class="kanan-atas"></div>

.kiri-atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 50px solid black;
  border-right: 50px solid transparent;
}

.kanan-atas{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-top: 50px solid black;
  border-left: 50px solid tranparent;
}


Yang sudut bawah

<div class="kiri-bawah"></div>
<div class="kanan-bawah"></div>

.kiri-bawah{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-right: 50px solid transparent;
}

.kanan-bawah{
  margin: 30px;
  width: 0px;
  height: 0px;
  border-bottom: 50px solid black;
  border-left: 50px solid tranparent;
}

Silahkan download source codenya di sini.

Sabtu, 15 Agustus 2015

Memasang Google Custom Search Engine

Pernahkah kalian melihat sebuah kotak pencarian di sebuah situs? Biasanya kotak pencarian tersebut sudah ada pada template web yang kita gunakan. Tapi, bagaimana kalau ternyata template yang kita gunakan tidak memiliki fitur tersebut? Pencarian kan termasuk fitur yang lumayan penting. Seandainya kita lupa alamat salah satu halamannya, gimana kita mau nyari? Iya tidak?

Jangan khawatir. Ada sebuah cara yang bisa kita gunakan untuk membuat pencarian di dalam website atau blog kita tanpa harus repot-repot membuatnya secara manua. Yaitu Google CSE(Custom Search Engine), yang merupakan mesin pencari namun dapat di sesuaikan hanya untuk situs atau alamat tertentu. Dan tentu saja bentuk dan tampilannya mirip Google.

Misalnya saya mempunyai blog dengan alamat byabdillah.blogspot.com dan saya memasang Google CSE. Ketika seseorang mengunjungi blog saya dan melakukan pencarian menggunakan Google CSE yang disesuaikan, maka yang akan tampil adalah hasil yang berasal dari blog saya.

Timbul, pertanyaan. Bagaimana kita memasang Google CSE?

Pertama-tama, masuk ke halaman Google CSE di http://cse.google.co.id/. Kemudian tekan tombol Masuk Ke Mesin Telusur Khusus.


Setelah itu mungkin kita akan disuruh login terlebih dahulu. Loginnya menggunakan akun google kita aja. Bagi yang belum punya akun google, buat dulu ya.

Setelah halaman selanjutnya muncul, isikan url blog atau website kita pada inputan seperti gambar dibawah





Sebagai contoh, saya akan memasukkan url blog saya.
Oh iya, kita juga bisa memasukkan beberapa url blog yang berbeda lho.

Kemudian pilih bahasa. Standarnya English, tapi kalau tidak biasa English pilih Bahasa Indonesia aja. Jangan lupa, kasih nama pada mesin telusur.

Setelah itu tekan tombol Buat.

Lalu akan muncul pesan selamat
Tekan tombol Dapatkan kode, dan kita akan terdirect menuju halaman lain.
Copy script yang ada di dalam tempat yang abu-abu itu dan salin di  widget blog atau di website kita.

Karena kita belum mengubah tampilan, Google Custom Search akan terlihat seperti ini
Kalau ingin merubah tampilannya, Pilih nama dari google cse yang telah kita berikan tadi. Kemudian pilih Tampilan dan nuansa.


Lalu kita bisa mulai merubah tampilan Google CSE kita. Beberapa pilihan yang bisa kita gunakan adalah :
Untuk Tema, terdapat 7 tema yang tersedia.
Silahkan gunakan yang menurut kalian paling cocok. Kalau tidak ada yang cocok, silahkan pilih tab sesuaikan. Dengan ini, kita bisa menyesuaikan warna-warna yang digunakan pada Google CSE.
Yang paling penting, jika sudah merasa cocok dengan pilihan kita. Tekan tombol Simpan & Dapatkan Kode untuk mendapatkan script-nya. Lalu salin ke blog atau website kalian.

Note: terkadang, style Google CSE menjadi berantakan karena terpengaruh oleh template yang kita gunakan.

Sekian saja ya, kalau ada yang mau nanya tinggal komen. Tapi jangan gaduh. Bye~


Jumat, 14 Agustus 2015

CSS Combinators

Css combinators adalah sesuatu yang menjelaskan hubungan antar selector.

div{
  background-color: red;
}

Div dalam sintaks css di atas merupakan selector. Sebuah selector dapat memiliki sebih dari satu selector sederhana. Kita dapat memasukkan combinator pada selector yang sederhana.

Terdapat 4 combinators berbeda dalam css, khususnya css3 :
  • descendant selector (selector berdasarkan keturunan)
  • child selector (selector berdasarkan anak)
  • adjacent sibling selector (selector berdasarkan saudara yang berdekatan)
  • general sibling selector (selector berdasarkan saudara secara umum)
Jika kalian pernah belajar css, kalian pasti sudah pernah menggunakan descendant selector. Karena, descendant selector merupakan combinators yang paling sering digunakan (menurut saya).

Descendant Selector

Descendant selector akan memilih semua elemen yang cocok berdasarkan keturunan dari elemen tertentu.
Contoh:

div p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>
    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>
  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Css di atas akan membuat semua <p> atau paragraf yang merupakan keturunan dari div memiliki background berwarna merah, termasuk yang berada di dalam tag <span>. Karena tag <span> juga masih berada di dalam div.

Jadi, paragraf pertama, kedua dan ketiga akan memilik background berwarna merah karena berada di dalam div. Sedangkan paragraf keempat dan kelima tidak, karena berada di luar div.

Child Selector 

Child selector akan memilih semua elemen yang merupakan anak langsung dari elemen teretentu.

div > p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>
    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>
  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, hanya paragraf pertama dan ketiga saja yang memiliki background berwarna merah. Paragraf kedua tidak memiliki background berwarna merah karena paragraf kedua bukan keturunan langsung dari div. Akan tetapi keturunan langsung dari <span> atau bisa dibilang cucu dari div.

Adjacent Sibling Selector

 Adjacent sibling selector akan memilih semua elemen yang  merupakan saudara kandung (atau setingkat) dan berdekatan dengan elemen tertentu.

div + p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>
    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>
  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, hanya paragraf keempat yang memiliki background berwarna merah. Paragraf pertama, kedua dan ketiga berada di dalam div, sehingga tidak satingkat dengan div dan merupakan turunan dari div. Sedangkan paragraf kelima, meskipun saudara (atau setingkat) dengan div namun tidak berdekatan dengan div. hanya paragraf keempat yang merupakan saudara dari div, dan letaknya berdekatan dengan div.

General Sibling Selector

General sibling selector akan memilih semua elemen yang merupakan saudara kandung dari elemen tertentu.

div ~ p{
  background-color: red;
}

Jika sintaks html-nya seperti di bawah ini :

<div>
  <p>Paragraf pertama di dalam div</p>
  <span>
    <p>Paragraf kedua di dalam div, dan juga di dalam span</p>
  </span>
  <p>Paragraf ketiga di dalam div</p>
</div>
<p>Paragraf keempat di luar div</p>
<p>Paragraf kelima di luar div</p>

Maka, paragraf keempat dan kelima memiliki background berwarna merah. Karena paragraf keempat dan kelima merupakan saudara dari div.

Itulah yang bisa saya sampaikan hari ini. Semoga bermanfaat dan jangan sungkan untuk komentar kalau timbul pertanyaan dalam benak kalian saat membaca postingan ini.

Kamis, 13 Agustus 2015

Navigasi Fixed Ketika di Scrool

Kali ini kita akan membuat menu navigasi yang akan otomatis fixed ketika di scrool. Tidak terlalu rumit kok. Cuma beberapa baris JavaScript menggunakan jQuery. Baiklah, mari kita mulai.

Pertama, kita buat halamannya.

<!doctype html>
<html>
<head>
 <title>nav-fixed-scrool</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
 <header id="menu1">
  <h1>Ini Header</h1>
 </header>
 <nav>
  <ul>
   <a href="#menu1"><li>Home</li></a>
   <a href="#menu2"><li>Portofolio</li></a>
   <a href="#menu3"><li>Tentang Kami</li></a>
   <a href="#menu4"><li>Hubungi Kami</li></a>
  </ul>
 </nav>
 <section>
  <article id="menu2">
   <h1>Portofolio</h1>
  </article>
  <article id="menu3">
   <h1>Tentang Kami</h1>
  </article>
  <article id="menu4">
   <h1>Hubungi Kami</h1>
  </article>
 </section>
</body>
</html>
Untuk jQuery-nya bisa di download di sini. Nanti muncul halaman, terus di-SaveAs.

Lalu buat file css di folder yang sama dengan html tadi. Nama file css-nya style.css

body *{margin:0px;}
header{
 width: 100%;
 height: 250px;
 background-color: orange;
}
nav{
 position: absolute;
 width: 100%;
 height: 50px;
 background-color: #333;
}
nav a{
 display: inline-block;
 padding-right: 20px;
 text-decoration: none;
 font-size: 14pt;
 cursor: pointer;
 color: #fff;
}
nav a:hover{
 color:  orange;
}
article{
 padding-top: 50px;
 width: 100%;
 height: 500px;
 background-color: orange;
 border-top: 5px solid #333;
}
Yang terakhir, tambahkan script berikut di atas tag </head>.


<script type="text/javascript">
 $(document).ready(function(){
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if (y>=250){
     $("nav").css({
      "position":"fixed",
      "top":"0px"
     });
    }else{
     $("nav").css({
      "position":"absolute",
      "top":"250px"
     });
    };
  });
 });
 </script>
Selesai...

Untuk yang butuh source code-nya, bisa di download

Rabu, 12 Agustus 2015

Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part2)

Melanjutkan permasalahan yang kemarin. Kok kalau gambarnya didrag n drop ke gambar lain, gambar yang didrag ngilang? Kuncinya ada di javascript.

Ubah bagian function JavaScript

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

Menjadi

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var u = ev.target.id;
    var i = u.substr(0,1);
    if (i!="g") {
     ev.target.appendChild(document.getElementById(data));
    };
}

Penjelasan :

Di sini, gambar harus mempunyai id yang berawalan huruf "g". Jika konten yang didrag diletakkan di konten yang memiliki id yang berawalan "g", maka tidak dilakukan pertukaran data seperti seharusnya. Jadi, gambar tidak bisa diletakkan ke dalam gambar karena gambar memiliki id yang berawalan "g".

Untuk lebih jelasnya, silahkan download contohnya di sini.

Silahkan diobrak-abrik codenya biar paham. Atau silahkan kunjungi Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part1).

Selasa, 11 Agustus 2015

Membuat Game Puzzle Sederhana dengan HTML, CSS dan JavaScript (part1)

Kali ini kita akan membuat semacam game puzzle gambar dengan memanfaatkan css clip yang pernah saya posting sebelumnya di sini, dan juga sedikit javascript yang saya dapatkan dari w3shcools.com di sini.

Kenapa kita memerlukan css clip? Ada yang bertanya seperti itu? Kalau ada, maka jawaban saya adalah tentu saja untuk memotong gambar. Agar cukup satu gambar saja yang kita gunakan pada game ini. Tapi, jika kalian tidak menggunakan css clip juga tidak masalah. Asalkan mau memotong gambar yang akan kalian gunakan menjadi beberapa bagian.

Lalu gunanya javascript itu buat apa? Ya buat nge-drag and nge-drop gambarlah. Ini adalah bagian pentingnya. Tanpa javasript ini, gambar tidak akan bisa di-drag maupun di-drop. Tenang saja, javascript-nya gak banyak kok. Cuma se-di-kit aja.

Baiklah, mari kita buat puzzle-nya!

Pertama, kita akan memilih gambar yang akan kita gunakan. Di sini, saya akan menggunakan gambar di bawah.



Kedua, buat tiga buah file kosong dengan nama game.html, game.css dan game.js. Pada game.html, kita tulis :

<!doctype html>
<html>
<head>
  <title>puzzle</title>
  <link rel="stylesheet" type="text/css" href="game.css">
  <script type="text/javascript" src="game.js"></script>
</head>
<body>

</body>
</html>

Setelah itu, buat tiga buah div di dalam body dengan class all dan gbr. Jangan lupa masukkan gambar kita ke dalam div yang class-nya gbr.

<div class="all"></div>
<div class="gbr">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
</div>

Kemudian buat sebuah tabel dengan 5 kolom dan 2 baris di bawah kedua div sebelumnya. Pastikan cellspacing dan cellpadding bernilai nol. Biar kelihatan, nilai border dibuat menjadi 1.

<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Lalu kita buka game.css dan tulis : 

.all{
  position: absolute;
  width: 100%;
  height: 100%;
}
.gbr{
  float: left;
}
.gbr img{
  width: 400px;
  height: 400px;
  border: 2px solid black;
  opacity: .5;
}
table{
  float: left;
  position: absolute;
}

Kali ini kita akan menyusutkan gambarnya sehinggal panjang dan lebar gambar menjadi 400px (lihat yang di-mark di atas). Jadi, akan lebih baik jika kalian menggunakan gambar yang nilai panjang dan lebarnya sama. Agar gambar tetap kelihatan bagus.

Masukkan div dengan class box dan juga id mulai d1 sampai d4 ke dalam cell atau td, kecuali td urutan yang ketiga. Sekalian drag event dan drop event juga. Nanti hasilnya akan seperti ini :

<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td>
      <div class="box" id="d1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td>
      <div class="box" id="d2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td></td>
    <td>
      <div class="box" id="d3" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
    <td>
      <div class="box" id="d4" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="box" id="d5" ondrop="drop(event)" ondragover="allowDrop(event)"&  gt;</div>
    </td>
    <td>
      <div class="box" id="d6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    </td>
    <td></td>
    <td>
      <div class="box" id="d7" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
    <td>
      <div class="box" id="d8" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img draggable="true" ondragstart="drag(event)" class="k12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
      </div>
    </td>
  </tr>
</table>

Kemudian masukkan gambar pada 2 div terakhir masing-masing tr. Lihat script atas.

<img draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">

Pastikan gambar mempunyai class mulai dari k11, k12, k21 dan k22. Gambar yang mempunyai class k11 akan kelihatan pojok kiri atas, k12 pojok kanan atas, k21 pojok kiri bawah dan k22 pojok kanan bawah. Jadi, jangan sampai ada gambar dengan class yang sama ataupun double. kalau sampai ada, nanti gambarnya gak bisa diselesaikan.

Di game.css tambahkan script css ini dibawahnya.

.box{
  width: 200px;
  height: 200px;
}
.box img{
  position: absolute;
  width: 400px;
  height: 400px;
}
.k11{
  clip: rect(0px, 200px, 200px, 0px);
}
.k12{
  clip: rect(0px, 400px, 200px, 200px);
  margin-left: -200px;
}
.k21{
  clip: rect(200px, 200px, 400px, 0px);
  margin-top: -200px;
}
.k22{
  clip: rect(200px, 400px, 400px, 200px);
  margin-top: -200px;
  margin-left: -200px;
}

Script css di ataslah yang berperan penting dalam pemotongan gambar.
Buka gambar.js dan tulis.

function allowDrop(ev) {
    ev.preventDefault();
}

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

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

Hasilnya :
















Lho? Kok gak bisa digerakin sih? Ada yang tahu penyebabnya? Kita lupa menambahkan id pada gambar. Ok, kita tambahkan id. Id gak boleh ada yang sama ya! Kita kasih id g1 sampai g4 aja.

Jadi...
<!doctype html>
<html>
<head>
 <title>puzzle</title>
 <link rel="stylesheet" type="text/css" href="game.css">
 <script type="text/javascript" src="game.js"></script>
</head>
<body>
 <div class="all"></div>
 <div class="gbr">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
 </div>
 <table border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td>
    <div class="box" id="d1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>
    <div class="box" id="d2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
   <td>
    <div class="box" id="b1" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g4" draggable="true" ondragstart="drag(event)" class="k22" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
   <td>
    <div class="box" id="b2" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g3" draggable="true" ondragstart="drag(event)" class="k21" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
  </tr>
  <tr>
   <td>
    <div class="box" id="d3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td>
    <div class="box" id="d4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   </td>
   <td></td>
   <td>
    <div class="box" id="b3" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g2" draggable="true" ondragstart="drag(event)" class="k12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
   <td>
    <div class="box" id="b4" ondrop="drop(event)" ondragover="allowDrop(event)">
     <img id="g1" draggable="true" ondragstart="drag(event)" class="k11" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLJ4GXFO9YYPWxS9MpaA5LqzYNk3gEpWZw19RwJSptZR_IMzeVQcKIpvD5-gMFW_8xk4USJAYWIM8G2A2Y7gkZRWFmuPdzQXB3iWsl_b1g1w6yESdeciMEfL7M2vfwc7udt3Lyqny-Vmy/s1600/photo.jpg">
    </div>
   </td>
  </tr>
 </table>
</body>
</html>



















Tapi, kalau gambarnya di drag n drop ke gambar kok ngilang?
Kita akan mengatasi masalah itu di part2. Silahkan klik di sini untuk menuju part2. Tunggu besok ya...