Membuat Postingan Terbaru

Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yangbergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
    
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
    
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="http://tulisanguruku.blogspot.com/2012/03/cara-membuat-recent-post-berjalan-di.html" target="_blank">get this widget here</a></small>

Menampilkan Kategori

Biasanya fitur yang muncul disertai thumbnail adalah related post atau recent post dan itu tutorialnya sudah banyak banget beredar di kalangan blogger, tapi kali ini adalah fitur kategori tertentu, misalnya kalau di blog ini kategori tutorial blog, wordpress, joomla, dan lain-lain. Jika temen-temen penasaran, bisa dilihat disini. Baiklah, kita langsung saja pada langkah-langkah pembuatannya :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan. 
3. Klik tab Edit HTML. 
4. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.
5. Carilah kode ]]></b:skin>, copy lalu paste kode berikut persis diatas kode ]]></b:skin>

/*** Featured Categories ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}

1. 6.  Carilah kode </head>, copy lalu paste kode berikut persis diatas kode </head> 
2. Klik tombol SIMPAN TEMPLATE.
3. Langkah pertama selesai

Langkah Kedua

1. Klik tab Rancangan/Design. 
2. Jika masih dalam posisi tab Elemen Laman, silahkan klik terlebih dahulu tab menu Elemen Laman. 
3. Klik Tambah Gadget untuk menambahkan gadget baru. 
4. Setelah muncul jendela baru, klik tanda plus untuk HTML/JavaScript  
5. Copy script dibawah ini, lalu paste pada kolom yang tersedia. Beri juga judul yang sesuai dengan yang anda inginkan. Namun sebelumnya anda harus mengubah tulisan yang di beri warna merah dengan nama kategori yang di inginkan. 

<script type='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script> 

<script type="text/javascript" src="/feeds/posts/default/-/Top Lyrics?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

1. Klik tombol SIMPAN
2. Langkah kedua Selesai.

Keterangan :

• var numposts = 6;
• var showpostthumbnails = true;
• var displaymore = false;
• var showcommentnum = false;
• var showcommentnum = false;
• var showpostdate = false;
• var showpostsummary = true;
• var numchars = 60;

Kode berwarna merah adalah kode yang bisa temen-temen edit, true berarti tampilkan, false berarti jangan di tampilkan, 60 adalah jumlah karakter, dan 6 adalah jumlah thumbnail yang ditampilkan Anda bisa ganti sesuai keinginan.

Menempatkan kode di google.com

ali ini saya akan memberikan sebuah solusi atau pemecahan bagi Anda yang memiliki masalah dengan loading blog yang cukup berat. Loading atau proses membuka pada sebuah program menjadi salah satu faktor penting bagi bekerjanya sebuah sistem. Begitu juga dengan loading sebuah blog, jika terlalu berat maka akan membuat kinerja blog yang kita kelola menjadi sulit untuk berkembang karena pengunjung pasti akan berkurang. Seorang pengunjung tidak mau lama-lama menunggu untuk melihat isi atau artikel yang ingin dibacanya. Mereka lebih memilih mengunjungi sebuah blog yang cepat proses membukanya, disamping lebih efisien waktu, mungkin juga biaya yang dikeluarkan lebih kecil jika mereka mesti bayar koneksi internet.

Blog yang saya bahas disini adalah blogspot, kecepatan loading blog platfrom blogger ini hanya tergantung pada seberapa banyak kode script yang kita masukkan ke dalam template tapi dengan asumsi kecepatan koneksi internet yang digunakan sama.  Beda dengan Wordpress atau platform blog lain yang menggunakan hosting sendiri, kecepatan blog tergantung juga dengan jenis dan kapasitas hosting yang dipakainya. Umumnya blog yang loadingnya berat biasanya memakai template jenis magazine seperti yang sering saya buat, karena banyak sekali fitur yang dipasang pada homepage. Sebenarnya dari Google sendiri juga menyarankan agar loading blog lebih cepat, paling tidak hanya 9 post yang ada di homepage. Tapi karena semakin berkembangnya blogger, platform blog ini sekarang bisa lebih dikembangkan sehingga menyerupai bentuk blog-blog profesional seperti platform lainnya dengan konsekuensi loading blog yang semakin lambat.

Bagi Anda pengguna blogger, saya akan memberikan solusi logis untuk meningkatkan performa kecepatan loading blog, khususnya bagi anda pemakai template style magazine. Jika anda memakai sebuah template dengan menggunakan banyak fitur, seperti slider, label per categori atau lainnya. Pasti pernah menemukan sebuah script yang panjang (biasanya diletakkan diatas kode </head>) atau script yang sudah disimpan di tempat penyimpanan Google Code oleh si pembuat template. 

Javascript yang belum disimpan di Google Code

Saya akan berikan contoh sebuah script dan cara menyimpannya di Google code anda sendiri. Perhatikan contoh script di bawah ini saya ambil yang sederhana :

<script language='javascript'>
function Barva(koda)
{
document.getElementById(&quot;vzorec&quot;).bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById(&quot;vzorec2&quot;).bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>

Perhatikan kode warna biru diatas, buka notepad kemudian copy kode warna biru ke notepad. (hanya warna biru). Setelah itu klik save as, pada File name beri nama file itu dengan diakhiri .js (misalnya :contoh.js). Dan pada Save as type pilih All files, Encoding biarkan pada ANSI, seperti pada gambar di bawah :

Setelah proses penyimpanan file di komputer sekarang kita simpan di Google Code agar bisa dipasang pada template. Buka Google Code Anda, kalau belum pernah menggunakan Google Code sebelumnya, Anda harus membuatnya terlebih dahulu berikut caranya :

1. Login ke akun Google anda, kemudian kunjungi http://code.google.com/hosting/
   
   
   
2. Setelah itu klik Create a new project seperti gambar diatas, setelah muncul jendela baru isi kotak kosong seperti contoh gambar di bawah.
   
   
   
   
   
   Yang perlu anda perhatikan adalah dalam mengisi Version control system dan source code lisence, Anda harus isi seperti contoh gambar diatas. Untuk kolom lain bisa diisi terserah anda. Setelah itu klik Create project.
3. Anda sekarang sudah mempunyai akun di Google Code, langkah selanjutnya adalah menyimpan kode javascript yang sudah dibuat diatas di Google Code. Menuju ke tab 'Download' dan klik New download. Kemudian klik Browse dan pilih file javascript yang ingin diupload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.
   
   
   
4. File javascript anda sudah diupload ke Google code. Sekarang tinggal memanggilnya dan meletakkanya di template Anda. Klik file yang tadi sudah diupload, setelah itu akan terbuka jendela baru. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) atau salin alamat tautan (Chrome) seperti gambar dibawah.
   
   
   
5. Sekarang bagaimana menempatkan direct link tersebut ke dalam template? Perhatikan dua gambar di bawah ini :
   
   
   
   Sebelum disimpan di Google code
   
   
   
   Sesudah disimpan di Google code
   
   
   Perhatikan kode block biru pada kedua gambar diatas, gambar atas belum diringkas dan pada gambar bawah kode sudah diringkas dan disimpan di tempat penyimpanan Google Code menjadi seperti ini :

   <script src="http://kauman.googlecode.com/files/contoh.js" type="text/javascript"/>

   Kode script diatas adalah kode ringkasan dari contoh kode script panjang paling atas dan warnamerah adalah direct link file yang kita upload di Google Code pada langkah nomer 4 diatas.

Javascript yang sudah disimpan di Google Code

Nah sekarang bagaimana jika file javascript itu sudah disimpan di Google Code milik akun lain? Saya akan berikan contohnya dibawah :

<script src='http://jamu-martin.googlecode.com/files/related-martin.js' type='text/javascript'/>

URL Javascript warna merah diatas yang harus diganti dengan URL script dari Google Code anda. Caranya copy URL tersebut ke browser Anda seperti gambar dibawah :

Kemudian tekan Enter pada keyboard. Jika muncul pilihan save, Anda tinggal save file tersebut kemudian upload ke Google Code Anda seperti langkah nomer 3 diatas. Tetapi jika setelah tekan enter muncul kode javascript yang berderet-deret banyak sekali deh pokoknya, copy kan kode itu ke notepad kemudian simpan seperti pada gambar paling atas pada artikel ini. Setelah itu upload ke Google Code seperti langkah-langkah diatas. Setelah itu masukkan atau ganti URL warna merah pada javascript diatas dengan URL atau direct link dari google code yang sudah Anda upload.

Kok bisa ya dengan menyimpan javascript di tempat penyimpanan Google Code sendiri bisa meringankan loading blog? Penjelasannya seperti ini, jika Anda memakai sebuah template dengan menggunakan banyak script yang disimpan di Google Code oleh si pembuat template, pastinya tidak hanya Anda yang memakai template tersebut, pasti ada pengguna lain yang memakai template yang sama. Jika kedua blog dengan menggunakan template yang sama loading pada saat bersamaan pasti akan terasa semakin berat, kalau cuma dua atau tiga sih nggak terlalu terasa kalau yang memakai template itu banyak apa tidak semakin berat loadingnya? Disamping itu juga untuk berjaga-jaga jika sewaktu-waktu script si pembuat template rusak atau overload.

Itu tadi satu tips untuk mempercepat loading blog Anda dengan menyimpan file Javascript di Google Code Anda sendiri, silahkan dipahami dan semoga bermanfaat.

STUDI KASUS ERD DAN NORMALISASI

Di sebuah tempat penyewaan Video Compact Disk (VCD), masih dilakukan pencatatan manual untuk Penyewaan dan pengembalian VCD oleh Penyewa. Dalam kasus ini, akan dirancang sistem komputerisasi Penyewaan (saja) VCD tersebut.

Analisis

1. Pihak-pihak yang terkait :

a.     Penyewa;

b.     Pemilik usaha;

c.      Petugas.

Petugas berada di dalam sistem (yang menjalankan sistem), sehingga tidak perlu digambarkan. Dari sini, terdapat 2 terminator, yaitu a dan b.

1.a. Penyewa

Data apa saja yang akan diberikan oleh Penyewa kepada sistem, dan data apa saja yang diberikan sistem kepada penyewa ?. Analisis ini bertujuan untuk menentukan data apa saja yang akan mengalir di alur data dari terminator Penyewa ke sistem (proses), dan sebaliknya.

1.a.1. Penyewa Baru

         Penyewa baru (di kasus ini) harus membuat Kartu Anggota terlebih dulu. Pembuatan Kartu Anggota tidak dipungut biaya tetapi si Penyewa harus menunjukkan identitas diri (contoh :  KTP).

Petugas akan mencatat identitas Penyewa, membuatkan Kartu Anggota, dan bersama dengan KTP tersebut diserahkan kembali ke Penyewa.

Proses manual bahwa KTP tersebut dikembalikan ke Penyewa tidak harus digambarkan di dalam arus data.

1.a.2. Prosedur Penyewaan oleh Penyewa

Penyewa yang akan meminjam film dipersilakan mencari sendiri filmnya, namun, bila mereka enggan mencarinya (tidak ketemu), mereka dapat langsung bertanya ke petugas. Petugas akan mengecek data film yang dicari dan akan dipinjam tersebut ke file di komputer. Hasil pengecekan itu diinformasikan kepada Penyewa.

Bila film dicari ada dan mereka mau meminjamnya, maka si Penyewa harus menyerahkan Kartu Anggotanya (di lapangan, bisa saja hanya dengan menyebutkan identitasnya saja), dan uang sewanya.

Adakalanya, petugas yang tidak yakin akan keanggotaan si Penyewa, dia melakukan cek keanggotaan ke file komputer. Bila ternyata data keanggotaannya tidak ada, maka si Petugas akan melakukan penolakan (pembatalan transaksi).

Bila benar anggota, maka Petugas akan mencatat data film yang dipinjam si Penyewa tersebut (transaksi) dan akan menyerahkan kembali Kartu Anggota dan film yang akan dipinjam tersebut ke Penyewa.

[Film | Informasi Penolakan] bisa ditulis : Film, Informasi Penolakan.

1.b. Pemilik Usaha (disingkat dengan Pemilik).

Apa saja data yang dibutuhkan oleh pemilik atas sistem, dan data apa saja yang diberikan oleh pemilik kepada sistem, perlu di analisis. Analisis ini akan menghasilkan alur data apa saja yang mengalir dari  Terminator ke sistem dan sebaliknya.

Pada kasus ini, dicontohkan bahwa Pemilik hanya butuh laporan keuangan harian.

“Aplikasi Peminjaman” yang tergambar di atas bisa saja ditulis secara detil, misalkan Bukti Keanggotaan, Uang Sewa, dan Daftar Film yang akan Disewa. “Identitas” boleh saja ditulis [KTP|SIM].

Sekali lagi, yang mengalir adalah data yang akan mempegaruhi proses komputerisasi, sedangkan untuk proses manualnya tidak perlu digambarkan. Misalkan, sewaktu akan meminjam film, Penyewa menyerahkan Kartu Anggota dan sewaktu menerima film, Kartu Anggota tersebut dikembalikan. Hal itu tidak perlu digambarkan.

2. Pembuatan Diagram Nol (Level 1)

Diagram Nol adalah pengembangan proses yang lebih mendetil dari proses (sistem) yang ada di konteksnya. Jadi, jumlah terminator dan alur data yang masuk dan keluar dari terminator harus tetap.

2.1. Proses Pembuatan Kartu Anggota

Lihat poin 1.a.1. di atas. Gambar DFD-nya :

Gambar 7. Penggalan Diagram Nol

2.2. Proses Penyewaan VCD

Lihat poin 1.a.2. di atas. DFD-nya akan digambarkan sebagai :

Gambar 8. Penggalan Diagram Nol

2.3. Proses Permintaan Informasi Keberadaan Film

Gambar 9. Penggalan Diagram Nol

2.4. Gambar DFD Zero (level 1) Lengkapnya

Gambar 10. DFD Level 1 Kasus di Atas

Beberapa catatan tambahan :

(1)  Pembuatan rancangan DFD harus sesuai dengan prosedur yang berlaku di tempat penelitian (jadi harus ada pembahasan mengenai prosedur yang berlaku, dan prosedur tersebut bukan penguji yang menentukan);

(2)  Penggambaran DFD hendaknya dibuat sebaik mungkin (mudah ditelusuri, dan tidak rumit, misalkan dengan tidak adanya alur data yang bersilangan).

(3)  Bila akan terjadi persilangan alur di penyimpan data, maka penyimpan data tersebut dapat digambar kembali dan diberi tanda ‘*’ yang menandakan bahwa penyimpan data tersebut sama dengan nama penyimpan data sebelumnya (copy).

(4)  Tanda ‘*’ di nomor proses berarti proses tersebut tidak perlu didetilkan lagi.

3.     Pembuatan Diagram Detil (level 2)

Diagram detil perlu digambarkan bila masih ada suatu proses yang bisa dirinci lebih lanjut. Di sini dimisalkan penggambaran dari proses 1.0 (Pembuatan Kartu Anggota).

Gambar 11. Diagram 1.0 Level 2

Gambar 12. Diagram 2.0 Level 2

Gambar 16. ERD dari Kasus di Atas

Belum normalisasi :

Hasil proses normalisasi bentuk pertama :

Proses normalisasi bentuk kedua :

Hasil proses normalisasi bentuk kedua :

Gambar 19. Hasil Normalisasi Data Tingkat kedua

Hasil proses normalisasi bentuk ketiga :

         Atribut ‘Kota’ di entitas Penyewa tergantung transitif kepada ‘Kd_Pos’. Karenanya, atribut ‘Kota’ dijadikan file sendiri dengan kunci atribut ‘Kd_Pos’.

Gambar 20. Hasil Normalisasi Data Tingkat Ketiga

Contoh bila dalam bahasa pemrograman dBase :

1.     Nama File : PENYEWA.DBF

      

Nama Field	Jenis Field	Panjang	Index
NO_ANG	Characters	6	Y
NAMA	Characters	20
JALAN	Characters	15
NO_RUMAH	Characters	5
RT_RW	Characters	8
Kd_Pos	Characters	5

2. Nama File : PINJAM.DBF

      

Nama Field	Jenis Field	Panjang	Index
NO_KWIT	Characters	6	Y
NO_ANG	Characters	6
KD_FILM	Characters	6
TGL_PINJ	Characters	10
TGL_KEMB	Characters	10
JML_FILM	Numeric	2
JML_BYR	Numeric	6
JML_DEN	Numeric	6
TGL_BYR	Characters	10
TGL_DEN	Characters	10

3. Nama File : FILM.DBF

      

Nama Field	Jenis Field	Panjang	Index
KD_FILM	Characters	6	Y
JUD_FILM	Characters	20
STOCK	Numeric	2
JNS_FILM	Characters	15
HRG_SEWA	Numeric	5

4. Nama File : KOTA.DBF

      

Nama Field	Jenis Field	Panjang	Index
KD_POS	Characters	5	Y
KOTA	Characters	15