Dibalik kisah vampir, versi Twilight Saga series

Sebelumnya saya peringatkan, bahwa artikel ini mengandung unsur horor, darah dan analisis praduga bisa salah bisa benar.

Pernah nonton film tentang drakula aka vampir ? Salah satu yang pernah saya tonton adalah seri Twilight Saga ( ada 5 seri kalau tidak salah ).

Dalam film digambarkan drakula aka vampir adalah makhluk abadi, alias immortal ( ? ),tidak makan-tidak minum, tidak tidur, dan hanya mengkonsumsi darah ( manusia atau hewan ).

Musuh vampir adalah werewolf alias manusia serigala, yang sudah berabad-abad musuhan. Ya kalau gak ada musuhnya gak seru dong filmnya …hahahaha

Kali ini saya ingin mengajak pembaca untuk bermain detektif-detektifan, ya macam Conan Edogawa gitu tapi cukup dari layar saja.

Kejanggalan-kejanggalan seputar vampire dan werewolf :

  1. Vampir itu immortal – kalau iya kenapa bisa mati saat kepalanya dilepas paksa ?
  2. Vampir minum darah – lho bukannya organ tubuh vampir itu terdiri dari jaringan mati? Terus darahnya buat apa ?
  3. Vampir takut cahaya matahari ( kalau di film, karena saat terpapar cahaya matahari nanti tampak seperti bercahaya ) – serius ah, bilang aja kalo bikin pusing kan gak tidur-tidur
  4. Vampir bisa mempunyai keturunan ? ( di film Edward Cullen menikah dengan Bella Swan dan kemudian Bella hamil ) – Mmmmm….terus itu cairan sperma dari mana ? Lha jaringan tubuhnya kan mati apalagi organ tubuhnya…makin tidak rasional
  5. Werewolf – saat berubah menjadi serigala dan kembali menjadi manusia, kok masih pakai celana ? Memang disimpan dimana tuh celana?
  6. …..

Yah namanya juga dongeng. Buat saya apapun itu mau vampir kek, mau werewolf kek, sama aja. Mode pembodohan logika terstruktur yang dikemas secara menarik melalui film / sinetron.

Kalau anak-anak disuguhi film-film semacam itu pastilah akan mempengaruhi imajinasi mereka. Menabur rasa takut tanpa alasan. Takut akan gelap, takut akan dimangsa atau mungkin parahnya malah mau jadi manusia serigala ?

Semua kembali ke pembaca. mau percaya atau tidak terserah. silakan baca lagi baris pertama artikel ini.

Ada ada di ujung pelangi ?

Rehat dulu dari koding … cerita santai saja lah

Pernah lihat pelangi ? Kalau belum … kasihan deh looo …hehehehe

Dengan spektrum warna yang sangat cantik, me-ji-ku-hi-bi-nia eh me-ji-ku-hi-bi-ni-u alias merah-jingga-kuning-hijau-biru-nila-ungu benar-benar fenomena alam yang mempesona.

Tidak aneh kalau sampai dibuat lagu. “Pelangi pelangi alangkah indahmu, merah kuning hijau dilangit yang biru …”

Nah disini saya mau komplain, kenapa ada korupsi warna jingga, biru, nila, dan ungu ? Apa karena bakalan mengubah ritme lagu ? Kan tinggal dimodifikasi sedikit tetap utuh warna pelanginya.

Betapa, anak-anak ( termasuk saya dulu ) sudah mengalami pembodohan terstruktur …hahahaha…

Itu mungkin tidak aneh kalau banyak yang belum pernah melihat pelangi, lha wong di lagu cuma ada 3 warna …hehehe

OK, sampai ada yang bilang ( pastinya bukan dari sosmed – jauh sebelum sosmed lahir ) kalau di ujung pelangi itu ada bidadari lagi mandi …..hmmmm….stop jangan mikir mesum bro …hehehe

Saya sendiri punya analisis sendiri siapa yang bilang kalau di ujung pelangi ada bidadari mandi ….mau tahu siapa ?…jawabnya adalah jaka sembung eh jaka Tarub.

Lho kok …

lha iya, kan ada legenda, saat bidadari-bidadari turun ke bumi dan mandi di sendang ( semacam danau kecil dengan sumber air mata eh mata air ), salah satu selendang bidadari itu disembunyikan oleh Jaka Tarub ( jejaka dari desa Jarub ? )

sampai disini, ada beberapa kejanggalan dengan legenda ( emang sih namanya juga legenda, asal aja kali ya ) :

  • kenapa bidadari turun ke bumi hanya untuk mandi ? apa tidak ada kamar mandi kah ? kenapa tidak mampir ke mall ? kalau ke mall kan bisa diliput acara entertainmen ….judulnya “Bidadari shopping” atau “Shopping bareng bidadari”
  • kenapa pilih sendang ? kenapa tidak di bawah air terjun sekalian ? Kalo dibawah air terjun kan bisa dapat shower gratis sekalian merasakan pijitan air terjun ( kalau tidak keburu pingsan )
  • Kenapa juga ada Jaka Tarub di sendang sana ? Kalau mau ngintip kenapa tidak pakai teropong dari bambu ? kan lebih terasa sensasinya ( iya kelilipan kena serbuk bambu ).
  • Kenapa hanya salah satu selendang yang disembunyikan oleh Jaka Tarub? Kenapa tidak semua ? Takut dikeroyok bidadari ? Wah asik dong …hehehhe

Sampai disini sepertinya jelas sudah, bahwa yang menghembuskan isu bahwa di ujung pelangi ada bidadari mandi adalah Jaka Tarub …. just kidding

dan mungkin juga ( mungkin salah maksudnya ), penulisan lagu pelangi terinspirasi oleh kisah petualangan jaka Tarub.

Whatever lah, namanya juga legenda, dan pastinya buat saya pelangi tetap indah meski tidak selalu muncul saat usai hujan. ( mungkin bidadarinya sudah tahu bakalan ada para Jaka-jaka ( meski sudah tidak perjaka ) lain yang siap mengintip, apalagi kalau sampai diekpos ke sosial media )

“pelangi pelangi alangkah indahmu, merah jingga kuning hijau biru nila ungu…”

Custom photo album gallery, DIY

masih di seri DIY aka Do It Yourself, kita akan belajar bagaimana caranya membuat custom photo album gallery yang fleksibel alias sesuai dengan apa yang kita butuhkan dan kalau perlu diinginkan.

Tutorial kali ini tidak akan melibatkan custom post type sama sekali, dan bisa digunakan untuk jumlah album photo gallery tanpa batas. OK, langsung aja ke spesifikasinya ya.

  • Photo harus dengan mudah digonta-ganti tanpa harus merubah kode php
  • Judul per foto dapat diubah dengan mudah
  • Urutan photo dapat diubah-ubah sekehendak hati ( selera )
  • Ukuran photo dapat diubah dengan mudah ( baik dengan tambahan kode atau melalui select box )
  • Jumlah foto per album tidak dibatasi
  • Ditampilkan dengan penggunaan resource yang seefisien mungkin ( bukan 100% efisien lho ya )
  • Kustomisasi dengan CSS harus mudah ( yeah, I’m css lover…you got it )
  • clean HTML 5
  • gak pake lama ( GPL ) …. hahaha
  • spesifikasi ini bisa ditambah tau dikurangi sesuai selera ( yo wes, it’s DIY project kok )

OK, dari spesifikasi yang dibuat diatas akan di breakdown menjadi :

  • photo album dibuat dengan menggunakan post meta dalam post type page dan atau post
  • penggunaan array dalam array ?
  • menggunakan tools pihak ketiga untuk mempercepat proses ( kan supaya GPL alias gak pake lama )

tools yang dibutuhkan :

  • Piklist plugin ( untuk modelling post meta )
  • Text editor ( saya pakai Sublime Text, silakan yang mau pakai Notepad juga bisa kok )
  • PHP versi 5.3.x atau lebih ( kalau tidak salah saya sempat test di server dengan PHP 7 dan ada sejumlah deprecated function di Piklist )
  • Bootstrap CSS untuk membentuk layout gallery

Instalasi Piklist

Download dan instal Piklist ( min versi 0.9.9.6 ) dari GitHub. Versi stabil 0.9.4.29 ( saat artikel ini tayang ), entah kenapa masih ada beberapa fitur yang tidak berjalan sebagaimana mestinya. Tapi kalau mau coba versi stable nya silakan aja.

Kali ini kita akan membuat tampilan post meta dengan bantuan Piklist untuk berjalan di themes, dan strukturnya adalah :

-nama theme
   - piklist ( folder )
      	-parts ( folder juga )
      	    -meta-boxes ( ini juga folder )
                - photogallery-form.php ( photo gallery form )

Start coding …yeah it’s the fun time, honey

Langkah pertama adalah membuat tampilan di post meta, dan itu berarti menulis kode untuk file photogallery-form.php

berikut rangkaiannya ( penjelasan dibawah )

/*
Title: Photo Gallery
Post Type: page
Order: 1
Collapse: true
*/

piklist('field', array(
  'type' => 'group',
  'field' => 'photogall',
  'add_more' => true,
  'label' => __('Photo collection', 'devio-photogallery'),
  'fields'  => array(

    array(
      'type' => 'file',
      'field' => 'image',
      'label' => __('Photo', 'devio-photogallery'),
      'columns' => 12,
      'help' => __('help me tooltip-nya disini','devio-photogallery'),
      'options' => array(
          'modal_title' => __('Set folder cover photo','devio-photogallery'),
          'button' => __('Upload','devio-photogallery'),
      ),
      'required' => true,
      'validate' => array(
        array(
          'type' => 'limit',
          'options' => array(
            'min' => 1,
            'max' => 1
          )
        ),
        array(
          'type' => 'image'
        )
      )
    ),

    array(
      'type' => 'text',
      'field' => 'judul',
      'label' => __('Title', 'devio-photogallery'),
      'columns' => 12,
    ),
  )
));

Dan tampilan awalnya akan seperti screenshot berikut :
add_newgallery-riesurya
Sampai sini bagaimana, gak pake lama kan …hehehe
OK, yuk kita breakdown penjelasan kode diatas. ( Jangan sampai nulis copy paste tapi tidak tahu kenapanya ..hehehe ).

  • Baris ke-2 : Judul post meta gallery box
  • Baris 3 : gallery box akan berada di post type Page
  • Order : tampil setelah text editor
  • Collapse :
  • Baris 9 : kita kelompokkan menjadi group ( serial array nanti datanya )
  • Baris 10 : id post meta ( photogall )
  • Baris 11 : Tombol untuk menambah-kurangkan foto
  • Baris 15-37 : field Upload. Perhatikan pada baris ke 25-32 ada validasi untuk membatasi per upload hanya boleh 1 foto saja.
  • Baris 39 – 44 : field untuk Judul, kita set dalam bentuk text field

OK, sampai disini bagian backend untuk photo gallery sudah selesai, dan selanjutnya tinggal bagaimana cara menampilkan data output.

Untuk itu ceritanya kita sudah mengupload dan melengkapi photo gallery box dengan sejumlah image berikut judul per foto nya.

drag and drop mode

photogallery-items

all items

photogallery-riesurya

Mengolah data menampilkan photo gallery

Nah ini bagian yang menyenangkan. Kita akan keluarkan data yang disimpan dari isian di atas ke front-end.
Karena data disimpan sebagai post meta, maka kita akan gunakan fungsi get_post_meta() untuk menampilkannya.

<?php global $post;
$gallery = get_post_meta( $post->ID, 'photogall', false );

Image akan ditampilkan berupa thumbnail dengan ukuran 360px X 220px, caranya adalah dengan menambahkan baris-baris kode berikut di functions.php

add_action( 'after_setup_theme', 'additional_image_size' );
function additional_image_size()
{
    add_image_size( 'img360', '360', '220', true );
}

Untuk memastikan seperti data array yang kita dapatkan, tidak ada salahnya melakukan pengecekan dengan menggunakan fungsi var_dump(). ( baca juga artikel Mengurai array, menampilkan data )

dan ternyata data array-nya adalah sebagai berikut :

array
  0 => 
    array
      'image' => 
        array
          0 => string '6098' (length=4)
      'judul' => string 'sweemee' (length=7)
  1 => 
    array
      'image' => 
        array
          0 => string '6119' (length=4)
      'judul' => string 'pizza like' (length=10)
  2 => 
    array
      'image' => 
        array
          0 => string '6107' (length=4)
      'judul' => string 'nasgor ?' (length=6)
  3 => 
    array
      'image' => 
        array
          0 => string '6105' (length=4)
      'judul' => string 'sliced fish' (length=9)

Perhatikan model array yang terbentuk dari form yang dibuat sebelumnya. Mumet ya….tenang, tidak serumit yang dikira kok. Santai aja.
Dari data hasil var_dump di atas, kita mendapati bahwa :

  • Data terdapat sebagai array dalam array
  • value untuk key image ( foto ) ditampilkan dalam bentuk ID ( attachment_id ) dan bukan URL. Untuk itu untuk itu digunakan fungsi wp_get_attachment_image_src()
  • value untuk key judul sudah bisa langsung diakses, siip lah

PS: penggunaan wp_get_attachment_image_src() akan menghasilkan array ( berikut dimensi thumbnail ), sementara dengan wp_get_attachment_url() akan menghasilkan string URL nya langsung.

OK, saatnya mengubah data array menjadi loop tampilan :

add_filter( 'the_content', 'content_gallery' );

function content_gallery( $content ) 
{ 
    if ( is_page_template( 'page-templates/my-gallery.php' )):
        global $post;
        $gallery = get_post_meta( $post->ID, 'photogall', false );
        $content = '';
        $content .= '<div class="col-md-12"><!--wrapper untuk gallery-->';
        foreach ( $gallery as $gallery_value ) :
            foreach ( $gallery_value as $v ):
                $image_url = wp_get_attachment_image_src( $v['image'][0] , 'img360', false);
                $content .= '<div class="col-md-4">';
                $content .= '<h3>' . esc_html( $v['judul'] ) . '</h3>';                    
                $content .= '<img class="img-responsive" src="' . esc_url( $image_url[0] ) .'">';
                $content .= '</div>';
            endforeach; //end foreach specific data
        endforeach; //end foreach $gallery - data group
        $content .= '</div><!-- .container -->';
        return $content;
    endif; //eof check page template
}

Mari kita breakdown kode di atas :

  • baris 1 : set filter hook untuk menyelipkan eh menyisipkan content gallery ke dalam loop ( the_content )
  • baris 5 : pengecekan bahwa output hanya boleh ditampilkan pada page yang menggunakan page template yang sudah ditentukan sebelumnya ( page-templates/my-template.php )
  • baris 6 : set global $post ( digunakan untuk mendapatkan ID artikel dimana gallery box terpasang )
  • baris 7 : pengambilan data dari database dengan menggunakan get_post_meta()
  • baris 10 : mengurai data array utama ( group items )
  • baris 11 : mengurai data untuk tiap item
  • baris 12 : ambil data image url dengan wp_get_attachment_image_src(), dengan ukuran 360px x 220px
  • baris 14 : panggil data judul
  • baris 15 : panggil data image URL

Bagaimana, simple kan ?

PS : kalau menggunakan DeVioPlayground kita tidak perlu repot-repot lagi menggunakan filter hooks the_content(), mau tahu aja atau mau tahu sama tempe sekalian ? hehehe

OK, ini kode bila menggunakan DeVioPlayground – fun theme framework :

add_action( 'devio/my-gallery/maincontent/do_action', 'content_gallery' );
//action hook yang spesifik untuk page template yang spesifik pula
function content_gallery() 
{ 
    global $post;
    $gallery = get_post_meta( $post->ID, 'photogall', false );
    ?>
    <div class="col-md-12"><!--wrapper untuk gallery-->
    <?php
    foreach ( $gallery as $gallery_value ) :
        foreach ( $gallery_value as $v ):
            $image_url = wp_get_attachment_image_src( $v['image'][0] , 'img360', false);
            ?>
            <div class="col-md-4">
                <h3><?php echo esc_html( $v['judul'] );?></h3>                   
                <img class="img-responsive" src="<?php echo esc_url( $image_url[0] );?>">
            </div>
        <?php    
        endforeach; //end foreach specific data
    endforeach; //end foreach $gallery - data group
    ?>
    </div><!-- .container -->
    <?php
}

Gimana? Lebih mudah dan sederhana kan ?

PS lagi : bila dicermati, terdapat escaping berupa esc_html untuk Judul dan esc_url untuk image. Mungkin lebay, ini hanya soal kebiasaan saja. “late escape principle“.

dan tampilannya saat ini adalah :

photogallerybox-riesurya

Untuk sisi style-nya silakan dipoles lebih lanjut dengan CSS atau bila mau dikembangkan lebih lanjut ya monggo gitu lho..

Gak janji, mungkin akan ada sambungan untuk stylingnya, lihat nanti saja deh

OK, sampai disini dulu tutorial membuat custom gallery. Mohon maaf bila ada penjelasan yang kurang jelas atau terlalu mendetail.

Terus terang ( tapi gak terus-terusan ), sharing via media teks tampak rumit dibanding bila tatap muka secara langsung. Kalau ada kesempatan dan kita bisa bertemu langsung dan belajar bareng, saya jamin tutorial ini bisa dipahami dalam kutang eh dalam waktu kurang dari 15 menit, beneran. ( gak mau serius, Serius aja bubar kok …hehehe )

sampai ketemu lagi di sesi tutorial lainnya.ahh miss u Ve

Ubah lokasi plugin direktori pada WordPress

Secara default system WordPress akan meletakkan plugins yang diinstal dalam direktori ( folder ) wp-content/plugins.

bagaimana supaya lokasi plugins tidak berada di lokasi default ?

Begini caranya :

//tambahkan di dalam wp-config.php - sebelum teks /* That's all, stop editing! Happy blogging. */
define( 'WP_PLUGIN_DIR', 'absolut/path/' );
define( 'WP_PLUGIN_URL', 'http://url-lokasi-plugins');

contoh di localserver saya menggunakannya sebagai :

define( 'WP_PLUGIN_DIR', '\xampp\public_html\riesurya-net\htdocs\plugins-riesuryadotnet/' ); //lokasi dengan xampp - customized
define( 'WP_PLUGIN_URL', 'http://plugins.riesurya.dev'); //sub domain di local server

bagaimana dengan di production server?
Hal terpenting adalah mengetahui lokasi absolute path, misal kalau di CPanel, system WordPress diinstal di root yang berarti berada di public_html/nama_instalasi_wordpress

bila, plugins direktori diletakkan di dalam satu root dengan system WordPress dan diakses sebagai http://namaweb.tld/plugins,
maka setting diatas menjadi :

define( 'WP_PLUGIN_DIR', 'public_html/plugins' );
define( 'WP_PLUGIN_URL', 'http://namaweb.tld/plugins'); 

bagaimana bila akses ke plugins dibuat sebagai sub domain ? misal, dengan akses http://plugins.namaweb.tld ?

prinsipnya sama saja, cukup menyesuaikan saja lokasi direktori sub domain ( misal diletakkan pada public_html/plugins ), maka setting akan menjadi :

define( 'WP_PLUGIN_DIR', 'public_html/plugins' );
define( 'WP_PLUGIN_URL', 'http://plugins.namaweb.tld'); 

Pertanyaan lanjutan ( ini imajinasi saya saja sih ), apa keuntungannya ?

keuntungan mendasar, kita bisa merasakan kemudahan update, upgrade dengan multi instalasi WordPress seperti halnya pada mode MultiSite ( networking ). Maintenance plugins cukup dari satu lokasi.

PS: ada kalanya trick diatas tidak berfungsi, dan hal tersebut disebabkan karena plugin author ( pembuat plugin ) melatakkan lokasi file–file terkait pluginnya dengan menggunakan path wp-content/plugins.

Tanpa bermaksud menyalahkan, sejatinya plugin author menggunakan relative path seperti plugin_dir_path, dan bukan wp-content/plugins.

Solusi bila menemui kegagalan trick diatas, bisa dengan megubah path wp-content/plugins menjadi plugin_dir_path(__FILE__). Kalau masih kesulitan, kirim ke kotak pesan atau email [email protected] Saaya akan bantu semampunya.

Mengurai array menampilkan data

Kadang eh sering kita menemui data yang akan ditampilkan dari database adalah berupa array. Data dalam array tidak bisa ditampilkan begitu saja, dan kadang perlu sedikit usaha untuk menampilkannya.

Contoh berikut adalah data array :

<?php
  $gallery = array(
    array(
      'title' => 'numero uno',
      'description' => 'yeah numero uno is numero satu',
      'image' => 'http://media.riesurya.dev/assets/gallery-07.jpg',
    ),
    array(
      'title' => 'numero duo',
      'description' => 'what duo, ok now numero duo',
      'image' => 'http://media.riesurya.dev/assets/gallery-06.jpg',
    ),
    array(
      'title' => 'numero tigo',
      'description' => 'again? numero tigo why not telu',
      'image' => '',
    ),
    array(
      'title' => 'numero piro',
      'description' => 'what the numero ? ah its ok if got piro, just give me image',
      'image' => 'http://media.riesurya.dev/assets/gallery-03.jpg',
    ),
  );
?>

Data array di atas termasuk array sederhana, dan untuk menampilkannya kita membutuhkan fungsi php foreach.

Lebih jelasnya bila variable $gallery ditampilkan melalui var_dump(), maka hasilnya adalah sebagai berikut :

array
  0 => 
    array
      'title' => string 'numero uno' (length=10)
      'description' => string 'yeah numero uno is numero satu' (length=30)
      'image' => string 'http://media.riesurya.dev/assets/gallery-07.jpg' (length=47)
  1 => 
    array
      'title' => string 'numero duo' (length=10)
      'description' => string 'what duo, ok now numero duo' (length=27)
      'image' => string 'http://media.riesurya.dev/assets/gallery-06.jpg' (length=47)
  2 => 
    array
      'title' => string 'numero tigo' (length=11)
      'description' => string 'again? numero tigo why not telu' (length=31)
      'image' => string '' (length=0)
  3 => 
    array
      'title' => string 'numero piro' (length=11)
      'description' => string 'what the numero ? ah its ok if got piro, just give me image' (length=59)
      'image' => string 'http://media.riesurya.dev/assets/gallery-03.jpg' (length=47)

Perhatikan baris ke 2, 7, 12,17 masing-masing menunjukkan nilai key kelompok array,dan tiap-tiap array tersusun atas kelompok key ( title, description, image ) dan value untuk tiap-tiap key. Pada contoh di atas, kita akan menampilkan data array tersebut dalam struktur HTML sebagai berikut :

Maka untuk menampilkannya kita harus mengurai satu per satu sebagai key ( $k ) dan value ( $v ) dengan kode berikut :

<?php
foreach ( $gallery as $k => $v ) :
?>
Title : <?php echo $v['title'];?>
<img src="<?php echo $v['image'];?>" alt="<?php echo $v['description'];?>">
<?php
endforeach; //loop selesai
?>

Perhatikan baris no.2 : kita urai data pada $gallery sebagai $k ( key ) dan karena tiap key memiliki value masing-masing maka dituliskan sebagai $k => $v. mulai baris ke-3, data value sudah terurai menjadi untuk tiap kelompok array dan sudah siap untuk ditampilkan pada baris ke-4, data title ditampilkan sebagai $v[‘title’], dan selanjutnya.
Sampai disini kita sudah bisa menampilkan array secara mendasar.Pertanyaan lanjutan, bagaimana bila ada data value yang kosong ? Untuk kasus ini ( lihat contoh array di atas, ada data key dengan value yang kosong ), maka kita perlu melakukan pengecekan sebelum ditampilkan.

<?php
foreach ( $gallery as $k => $v ) :
?>
Title : <?php echo $v['title'];?>
if ( !empty( $v['image'] ) ) : ?>
<img src="<?php echo $v['image'];?>" alt="<?php echo $v['description'];?>">
<?php
endif; //selesai cek ada image apa tidak
endforeach; //loop selesai
?>

Lihat ada if conditional dan !empty untuk memastikan bahwa hanya bila $v[‘image’] memiliki value maka gambar baru ditampilkan.

Mudah kan … smile baby

Mau lanjut ke pertanyaan berikutnya ? bagaimana bila kita hanya ingin menampilkan data pada kelompok array urutan ke -3 saja dan tidak semuanya ?

Untuk itu kita perlu paham kalau penghitungan dimulai dari nol, lihat lagi struktur data di atas dan kodenya adalah sebagai berikut :

<?php 
foreach ( $gallery as $k => $v ) :
if ( $k == '2' ) :
?>
  Title : <?php echo $v['title'];?>
  <?php 
  if ( !empty( $v['image'] ) ) :
  //check image ada apa tidak, kalo ada tampilkan dan sebaliknya
  ?>
    <img src="<?php echo $v['image'];?>" alt="<?php echo $v['description'];?>">
  <?php endif; //selesai if conditional untuk image checking ?>

  <?php endif; //checking $k == 2 
endforeach; //loop selesai
?>

Kiranya semoga tutorial singkat seputar array dan bagaimana menampilkannya bisa dipahami. Bilamana ada penyampaian dan materi yang kurang pas apalagi valid ya mohon dimaklumi. Saya hanya pembelajar alami dan tidak pernah sekolah koding hahahaha.

OK, sampai ketemu di sesi tutorial lainnya, entah php entah css …whatever lah.
Selamat pagi selamat berkarya

Membuat local server dengan XAMPP dan Windows

Umumnya kalau ujicoba aplikasi berbasis web di komputer PC kita akan menggunakan jalur akses http://localhost. Sementara saat di server online kita akan menggunakan nama domain seperti http://namadomain.tld ( tld : top level domain ).

Sekarang pertanyaannya, bagaimana supaya kita bisa mengakses localhost tapi tidak dengan menggunakan http://localhost, sebut saja misal http://namaproject.dev sementara ( nantinya atau pada production server ) kita akan menggunakan akses http://namaproject.xyz

atau bukan tidak mungkin pada saat di localserver, kita menggunakan akses yang sama seperti http://namaproject.xyz seperti seolah-olah kita sedang berada di lingkungan production ( online ).

Mau tahu caranya? mmmm mau tahu aja apa mau tahu banget … hehehe…yuk kita simak sama-sama

Menyesuaikan judul artikel maka kali ini kita akan menggunakan tools XAMPP for Windows, yang saat artikel ini ditulis tersedia dalam varian PHP 5.6.15, 7.0.2 ( nama versi XAMPP sama dengan versi PHP yang disertakan )

sebagai contoh karena saya terlanjur mendownload XAMPP yang versi 5.6.15, jadi kita pakai yang ada saja dulu ya. Tenang prinsipnya sama saja kok.

Tahapan :

  1. Pilih XAMPP dengan versi PHP yang diinginkan.
  2. Extract ke salah satu drive.
  3. Localhost pertamaku
  4. Setup host pada system Windows
  5. Setup Apache configuration
  6. aktivasi dan setting database phpMyadmin

tahap 1.

Download XAMPP dari sumber resminya di http://apachefriends.org/download, pilih yang auto extract ( supaya tidak pakai repot tambahan …hahaha )

Perhatikan, ukurannya sekitar 108 MB, jadi pastikan koneksi dan kuota cukup memadai. Mau yang cepat, cari teman yang sudah download, trus di copy deh.

xampp-download

tahap 2.

Extract ke salah satu drive misal G:/

kalau bisa disediakan satu drive tersendiri khusus untuk localserver ( bukan kenapa-kenapa, biar rapi dan tertib administrasi saja ).

Proses extract tergantung seberapa resource komputer, kadang bisa ditinggal minum kopi atau ditinggal mandi baru selesai. Tidak perlu ada intervensi apapun, biarkan saja sampai proses extraksi selesai.

Tahap 3.

Kita coba hasil extraksinya, dengan mengakses http://localhost

screenshot :

dan akses ke phpMyadmin.

disini akses database tersedia untuk beberapa user, dan kali ini kita akan membuat user baru untuk database, sebut saja username-nya aquc ( 2 karakter dari aqua kan aquc ), dan kita set saja priviledge nya ALL ( buat local sih tidak ada masalah ) dan passwordnya : a17u3p419S ( hayo apa itu … )

Tahap 4.

Setup host di system Windows.

Tahapan ini penting dan mohon berikan perhatian yang cukup memadai.

Kita akan membuka file host yang terdapat pada :

C:\Windows\system32\drivers\etc

berhubung file host ini tidak memiliki file extension, maka kita akan buka dengan text editor ( disini karena saya biasa pakai Sublime Text ya yang ada saja dipakai … dilarang komplain …hahahaha )

tambahkan baris :

127.0.0.1 myproject.dev ( perhatikan ada spasi antara nomor IP dan nama host )

lalu Save.

Tahap 5 :Setup konfigurasi Apache

Supaya server ( Apache ) tahu kalau kita membuat localserver dengan custom domain ( host ), kita perlu sedikit melakukan editing pada file : G:\xampp\apache\conf\extra\httpd-vhosts.conf

dan memodifikasi seperti contoh :

##<VirtualHost *:80>
##ServerAdmin [email protected]
##DocumentRoot "G:/xampp/htdocs/dummy-host2.example.com"
##ServerName dummy-host2.example.com
##ErrorLog "logs/dummy-host2.example.com-error.log"
##CustomLog "logs/dummy-host2.example.com-access.log" common
##</VirtualHost>

<VirtualHost *:80>
DocumentRoot "G:/xampp/htdocs/localproject"
ServerName myproject.dev
<Directory "/xampp/htdocs/localproject">
Require all granted
AllowOverride All
</Directory>
</VirtualHost>

Perhatikan ada penambahan berupa <Directory>

OK tahapan ke-4 dan 5 sudah berhasil dilalui dengan baik, dan kita harus melakukan restart Apache.

Tahap 6 : Instalasi WordPress ( sebagai material myproject )

sejauh ini sudah OK, dan selanjutnya kita install WordPress ( jangan komplain kenapa WordPress ya, soalnya saya pengembang theme dan plugin WordPress jadi yang ada dipakai … hihihi sedaap kan )

Extract paket WordPress ke dalam folder G:/xampp/htdocs/localproject

Sampai disini, kita bisa langsung mengakses melalui http://myproject.dev dan dilanjutkan dengan instalasi WordPress.

untuk menginstal WordPress kali ini kita harus membuat database baru dan cara yang mudah adalah dengan memanfaatkan phpMyAdmin.

screenshots :

So sampai disini kita sudah memilki project local dengan akses http://myproject.dev dan tidak lagi berupa http://localhost/localproject.

Bagaimana bila kita sedikit tambahkan eksperimen dengan menggunakan halaman url yang sama di production server ( http://myproject.xyz ) ?

Caranya simple, lakukan modifikasi seperlunya seperti tahap 4 dan 5, dan jangan lupa melakukan restart Apache supaya perubahan pada file host dan httpd-vhosts.conf bisa dibaca oleh server.

PS : untuk penggunaan localserver dengan nama host sama seperti di production server, kelemahannya adalah tidak bisa menjalankan XAMPP secara bersamaan saat sedang online.

PPS : Alternatif lain, saat akan online dengan menggunakan akses ke production server pastikan setting pada langkah ke -4 dan 5 di nonaktifkan dulu. ( Supaya tidak terjadi konflik kepentingan antara Apache di XAMPP dengan server di production server ).

So, akhirul ketik, selamat bermain-main dengan Apache dan selamat berkarya.

Saya, Riesurya mohon diri ( padahal mau tidur hahaha – nulisnya malem nih ), dan selamat bertemu lagi di edisi tutorial lainnya.

Myfia On The Web, reborn version 2015

Menjelang penghujung tahun 2015 ini, Myfia On The Web kembali hadir setelah sekian lama menjalani hibernasi.

Menggunakan theme baru dengan versi reborn aka terlahir kembali. Tampilan yang sederhana, intuitive dan tetap berwarna-warni.

Varian kali ini dibuat dengan mengaplikasikan DeVio Playground – dengan slogan more than just theme framework, it’s fun themework aka fun work.

Theme Framework? Benar sekali, meski menggunakan istilah theme framework, Devio Playground yang digunakan menggunakan konsep yang berbeda dengan theme framework yang ada di pasaran.

Bedanya? DeVio Playground adalah plugin dan bukan theme parent !

So, theme developer ( dalam hal ini saya ) tidak lagi menggunakan kode yang sama berulang kali di tiap kali membuat theme.

OK, back to reborn….

Sebelumnya mohon dimaafkan dan dimaklumi kalau pasca hibernasi ini banyak artikel setelah terindeks oleh mesin pencari ( testing development ) masih banyak yang kosong alias belum ada isinya. Namun begitu tidak perlu khawatir, artikel-artikel akan disajikan sesuai yang dijanjikan.

Apa yang baru ?

Mode archives dibuat dengan menggunakan table sorter untuk memudahkan pencarian data artikel. Untuk menampilkan artikel di halaman archives ini menggunakan json dan bukan WP_Query langsung. Hal ini dimaksudkan untuk efisiensi dan efektifitas server dan pastinya User eXperience 🙂

Layout tetap tampil responsive dan menjalani ujicoba melalui Google Mobile Ready Test dan hasilnya adalah 100% passed 😀

Cpanel phpMyadmin on white screen

Ada yang pernah mengalami saat mengakses phpMyadmin dari Cpanel dan tampilannya blank alias white screen?

Saya pernah, dan setelah diinvestigasi dengan Chrome Inspect Element ditemukan data sebagai berikut :

phpmyadmin-blank-inspection

Dari keterangan diatas, ditengarai kalau ada peranan CloudFlare di sana ( perhatikan text link cloudflare.min.js pada gambar )

Solusinya? simple saja.

Bila menggunakan layanan CloudFlare untuk urusan performa, non-aktifkan dulu fitur Rocket Loader, saat akan mengakses phpMyadmin dari CPanel.

Selanjutnya, bila sudah selesai urusan di phpMyadmin aktifkan lagi ( kalau mau 😀 )

So, benar-benar GPL aka Gak Pake Lama kan solusinya 🙂

Tips ini disajikan langsung solusinya saat saya mengalaminya pagi ini …sampai ketemu di sesi ketemu error cari solusi ( dan bukan panik ), masih bersama saya, Riesurya

Berdamai dengan notifikasi (aib) error pada WordPress

Salah satu hal yang (mungkin paling ) dihindari saat website tayang adalah tampilnya notifikasi error.  Sebut aja mulai dari file not found, sampai error dengan bahasa ajaibnya 😛

Tampilnya notifikasi error di sisi frontend dan apalagi kalau sampai terlihat oleh pengunjung manusia lumayan memalukan, apalagi kalau sampai halaman dengan tampilan error tersebut ter-index oleh mesin pencari…baca sunggu bikin malu 😀

Pada kebanyakan tips yang saya temui di internet umumnya mengajarkan dengan cara modifikasi pada file wp-config.php melalui :

define('WP_DEBUG', true);

saja !

Sampai disini error dijamin gak muncul, tapi bukan berarti bebas error 😛

Tips kali ini adalah dengan :

define('WP_DEBUG', true); 
define( 'WP_DEBUG_LOG', true ); 
define( 'WP_DEBUG_DISPLAY', false );

apa beda kedua cara diatas? Bukannya sama-sama menyembunyikan tampilan error dari pandangan mata yang tidak seharusnya ?

Klo cara pertama maka error tidak ditampilkan, dan kita pun dibuat terlena dan berleha-leha seolah-olah semua baik-baik saja, padahal … tidaaaakkk !#@?

Cara kedua, tampilan error ( sebagai aib ) tidak tampil untuk publik, namun akan tampil sebagai file debug.log yang tersimpan dengan rapi di dalam folder wp-content. Sampai disini, aib error tidak muncul kemana-mana, dan cukup sebagai bahan investigasi kita aja ( sebagai  pengelola web dan pastinya developer ).

Tampilan debug.log kurang lebihnya seperti pada thumbnail di atas.

Trus, bagaimana nasib error log itu sendiri?

ya itu tugas yang harus diselesaikan untuk diselidiki, dan dilanjut dengan penyidikan lebih lanjut. Kalo semua data sudah jelas, saatnya perbaikan.

Tips ini tidak menjelaskan seperti apa Penanganan Pertama Pada Kode Error ( P3K Error ), mungkin di lain artikel ?

sampai ketemu di tips lainnya masih di sesi InTips, bukan ngintip 😛