tag:blogger.com,1999:blog-31129011505003500422024-02-21T21:54:51.033+07:00Belajar CodeCharge Studio Cara mudah membuat website dinamis dengan CodeCharge Studio
(Dengan Contoh Kasus)Unknownnoreply@blogger.comBlogger48125tag:blogger.com,1999:blog-3112901150500350042.post-21032471922595916382016-07-18T09:06:00.000+07:002016-07-18T09:16:37.201+07:00CodeCharge Studio Masih Ada Ternyata..<div class="separator" style="clear: none; float: center;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="https://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script></div>
<br />
Lama blog belajar codecharge ini tidak aktif. Bukan tanpa alasan. Setelah menggunakan ccs sejak versi 1.1 bertahun-tahun lalu, rasanya belum menemukan software lain yang seperti ccs. Mungkin karena sudah sangat terbiasa jadinya agak malas mencari dan mempelajari software lain.<br />
Bayangkan saja, entry terakhir di blog ini tahun 2014.<br />
Sejak dikeluarkan versi 5.0 pada 24 desember 2011, dan final versi 5.0 pada 12 maret 2012, aku belum memutuskan untuk menggunakan versi baru ini. Setiap versi baru memiliki banyak bug yang dapat mengganggu pekerjaan. Selain itu banyak proyek yang masih menggunakan versi 4 yang jika di konversikan ke versi 5 akan memerlukan banyak sekali perubahan yang bikin pusing.<br />
Dan benar saja, pada 4 april 2012 keluarlah versi CodeCharge Studio 5.0 Update Available (5.0.0.15750).<br />
Karena sedang menggunakan v 4 untuk beberapa pekerjaan, aku masih belum pakai update v5 ini.<br />
<br />
<a name='more'></a><br /><br />
19 agustus 2013 keluarlah versi 5.1 dan di update pada 26 september 2013. Diperbaharui lagi pada 29 oktober 2013 yakni <span class="ContentNews"></span><br />
<h3>
<span class="ContentNews">CodeCharge Studio 5.1 Update Available (5.1.1.18990).</span></h3>
<br />
<span style="background-color: #e06666;">Dan.... sejak itu tidak ada update lagi,</span> tidak banyak perbincangan oleh admin yessoftware di forum support. Membuat banyak pengguna bertanya-tanya apakah ccs sekarat?<br />
Di beberapa forum diluar yessoftware diperbincangkan mengenai ccs yang tidak lagi terlihat aktif, terkesan mati suri. Membuat pengguna berfikir untuk mulai mencari pengganti.<br />
<br />
Teknologi berkembang terus, PHP sebagai koding paling populer berkembang pesat, demikian juga database terutama MySql. Apa jadinya kalau terus menggunakan ccs 4, sedangkan ccs 5 tidak terlihat ada perbaikan/update lagi dalam waktu yang lama.<br />
Itulah yang terjadi.. bagaimana mungkin bisa terus menggunakan v4 sementara teknologi html 5 pun berlari terus semakin populer.<br />
<br />
Setelah lama sekali tanpa berita.. pada 18 maret 2016 ada berita baru.<br />
<span class="ContentNews"></span><br />
<h3>
<span class="ContentNews">CodeCharge Studio 5.1 Update Available (5.1.1.18992)</span></h3>
<span class="ContentNews">
CodeCharge Studio was updated with the following changes and fixes:<br />
</span><br />
<ul><span class="ContentNews">
<li>CCS 5.1 now supports PHP 7</li>
<li>Fixed numerous compatibility issues with the PHP 5.5+</li>
<li>Updated ODBC connector</li>
<li>Updated MySQL connector</li>
</span></ul>
<span class="ContentNews">
Menggembirakan.. berita ini memperlihatkan tanda ccs belum mati.<br />
<br />
Demikianlah saudara-saudara.. ccs masih ada dan aku akan pakai </span><br />
<h3>
<span class="ContentNews">CodeCharge Studio 5.1 Update Available (5.1.1.18990) pada project baru nanti. Semoga ada. </span></h3>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-50564452485708092062014-03-29T22:27:00.000+07:002014-03-29T22:36:04.291+07:00Thumbnail Image Gallery Membuat image galeri menggunakan Codecharge adalah perkara mudah. Dengan menggunakan Builder Gallery Builder album gambar ini dapat selesai dengan cepat. Tetapi hasilnya kurang baik bagi pengunjung karena image yang dihasilkan memiliki ukuran yang besar. CodeCharge hanya merubah ukuran panjang dan lebar saja, bukan besaran file (Kb). Tentunya image galeri kita akan sangat lambat tampil. Bayangkan jika kita mengupload 9 gambar dengan ukuran masing-masing 1 Mb. Pengunjung akan cepat-cepat kabur karena Loading yang lama.<br />
Berikut ini saya perlihatkan cara sederhana tapi efektif untuk menampilkan hanya Thumbnails image saja sehingga image galeri kita cepat ditampilkan. <br />
<br />
<a name='more'></a>Dalam contoh ini, saya menggunakan script PHP "Smart Image Resizer" dapat download di <a href="http://shiftingpixel.com/2008/03/03/smart-image-resizer/" target="_blank">http://shiftingpixel.com/2008/03/03/smart-image-resizer/</a> Silahkan download dulu dan simpan file image.php di server. Di bawah ini saya copy keterangan dari halaman tersebut. Perhatikan petunjuk penggunaan, terutama bagian path to image.<br />
<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script></div>
<h3>
Features</h3>
<ul>
<li>Resizes <acronym title="Joint Photographic Experts Group">JPEG</acronym>s, <acronym title="Graphics Interchange Format">GIF</acronym>s, and <acronym title="Portable Network Graphics">PNG</acronym>s</li>
<li>Intelligently sharpens for crisp photos at any size</li>
<li>Can crop based on width:height ratios</li>
<li>Can color-fill transparent GIFs and PNGs</li>
<li>Built-in caching keeps image variations for optimal performance</li>
</ul>
<h3>
Requirements</h3>
<a href="http://php.net/">PHP 5.1.0+</a> compiled with <a href="http://php.net/gd">GD</a>. (<i>You need a version of GD that supports <code>imageconvolution()</code>, such as the bundled version. Note that on some distributions, the default php-gd package may not be adequate.</i>)<br />
<br />
<h3>
To Install</h3>
<ol>
<li>Unzip on your web server</li>
<li>In the same directory, create a directory called “imagecache”</li>
<li>Make your imagecache directory is writable by the web server (usually <code>chmod 775</code>)</li>
</ol>
<br />
<h3>
Menggunakannya di CodeCharge Gallery Builder.</h3>
Gunakan gallery builder seperti biasanya (<a href="http://id-codecharge.blogspot.com/2013/01/membuat-gallery-photo-dengan-gallery.html" target="_blank">http://id-codecharge.blogspot.com/2013/01/membuat-gallery-photo-dengan-gallery.html</a>), misal terlihat seperti gambar berikut.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWYKkWw-rQeyiCQ8EZAVzBwuUSoaYHdHsec6nPWMkjRUG0tgi0HIgywUm7A0MaFGQGnxkiC7y05pW0yQxqQW2tgDeMpZfdzC_veGUJ9hHQQpXiZbFfTDdC5g04evJSmMda3-xE_6XdbLo/s1600/thumbnail1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWYKkWw-rQeyiCQ8EZAVzBwuUSoaYHdHsec6nPWMkjRUG0tgi0HIgywUm7A0MaFGQGnxkiC7y05pW0yQxqQW2tgDeMpZfdzC_veGUJ9hHQQpXiZbFfTDdC5g04evJSmMda3-xE_6XdbLo/s1600/thumbnail1.jpg" height="153" width="400" /></a></div>
Kemudian masuk ke tampilan HTML, hapus baris imagelink (mulai dari <a href=....... sampai /a>. ganti dengan<br />
<br />
<a href="/<span style="background-color: yellow;">folder</span>/{Label1}" target="_blank"><img alt="{Label2}" src="/image.php/{Label3}?width=<span style="background-color: yellow;">172</span>&amp;height=<span style="background-color: yellow;">100</span>&amp;image=/<span style="background-color: yellow;">folder</span>/{Label1}" width="<span style="background-color: yellow;">172</span>" height="<span style="background-color: yellow;">100</span>"></a><br />
<br />
Sesuaikan parameternya dengan keinginan (yang ditandai warna kuning). <br />
Label di buat menggunakan toolbox forms Label.<br />
Untuk Label1 adalah nama file image (dari database ya)<br />
Label2 adalah alt, bisa diambil dari judul gambar di DB<br />
Label3 adalah nama file image juga.<br />
<br />
Silahkan preview.<br />
Contoh yang saya buat dapat dilihat di <a href="http://www.sistara.com/peta.php" target="_blank">http://www.sistara.com/peta.php</a>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-3112901150500350042.post-18183678544980521702014-01-04T18:20:00.000+07:002014-01-04T18:20:47.121+07:00Tetap di CodeCharge 4, Belum Pindah.<b>Selamat tahun baru 2014.</b><br />
<br />
Semakin tua saja ya.. heheh. Blog ini telat sekali updatenya.<br />
Beberapa waktu lalu, saya terima order membuat sistem database+peta (dengan google map) yang web base. Seperti biasanya, pilihan pertama adalah menggunakan PHP+MySQL.. Tau kan alasannya.. Betul, sudah terbiasa!<br />
Mumpung proyek baru, terpikir untuk menggunakan code charge studio versi 5. Sudah lama keluarnya di <a href="http://yessofware.com/" target="_blank">yessofware.com</a> setelah di download, install maka siap digunakan. Tampilan awal masih sama..<br />
<br />
<a name='more'></a><br />
<div class="art-layout-cell layout-item-5" style="width: 50%;">
<h1>
CodeCharge Studio 5.1</h1>
<div style="margin: 0;">
now with the Ribbon GUI and much more</div>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_aM67kF75BdjrYFJkkFFKiD4N3ZVtjWT4BpkCATqSUeJvzBI4B_eqxLw5lm64oXdRvfeKalAjF4Cra_vKYT6r-Sc8SdXRkW3YpXGwrzGPn-UixTLsWaGx8YVwj5I2bYqSSdncwY0A0M/s1600/ccs5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_aM67kF75BdjrYFJkkFFKiD4N3ZVtjWT4BpkCATqSUeJvzBI4B_eqxLw5lm64oXdRvfeKalAjF4Cra_vKYT6r-Sc8SdXRkW3YpXGwrzGPn-UixTLsWaGx8YVwj5I2bYqSSdncwY0A0M/s320/ccs5.jpg" width="320" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /><script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
//</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script></div>
<div class="separator" style="clear: both; text-align: justify;">
Masih trial 20 hari. Sepertinya masih terbatas maksimal 45 halaman.</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Tampilan berikutnya</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-hj54-qzLYgbfG6DvEZyPYhUCDHI3lwOuGxLkOsq48WpHDhsgcrYpN9HLayiY59G6wCRFRX92dtoi0TpK2Di7LhmeKE_tdTu7oKRAhbWUSoO8Nt1GuorxojuphelCsqNl6fNnjMdxhJ4/s1600/welcome.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-hj54-qzLYgbfG6DvEZyPYhUCDHI3lwOuGxLkOsq48WpHDhsgcrYpN9HLayiY59G6wCRFRX92dtoi0TpK2Di7LhmeKE_tdTu7oKRAhbWUSoO8Nt1GuorxojuphelCsqNl6fNnjMdxhJ4/s320/welcome.jpg" width="320" /></a></div>
Tampilan berbeda dengan versi sebelumnya. Hanya saja pilihan untuk aplikasi builder dan aplikasi sample disodorkan di halaman welcome ini.<br />
<br />
Next..<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_L-vlx4X34KKmPldEc4C7CgSctsTxh6ke4xWbmu34yv01D07hgGi30dfIGZGulPm6Ek8amIiVUfDlrzgflz4Q94wMKG3GZ5hsMnP5hpK-amd_Dfy0LnC_gCUwpEWJw3m59TD0BhBv3_k/s1600/newpage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_L-vlx4X34KKmPldEc4C7CgSctsTxh6ke4xWbmu34yv01D07hgGi30dfIGZGulPm6Ek8amIiVUfDlrzgflz4Q94wMKG3GZ5hsMnP5hpK-amd_Dfy0LnC_gCUwpEWJw3m59TD0BhBv3_k/s320/newpage.jpg" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: justify;">
Berbeda, menu-menu banyak mengambil ruang.Sepertinya lebih komplet. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVgzmXUAnXM5qHtVXIYl9YQAvxcxIy-0eqnMVLjTYVBJMeHsJ38n1eiFrW7ojJ5VKmZ9veM6CAlAI2PgJyBfAMJLQPXfkJnOg1GbZf6gIirrp_YlByDXZymiLxgVgVtVdG5I8BkQvvnw/s1600/menuccs5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVgzmXUAnXM5qHtVXIYl9YQAvxcxIy-0eqnMVLjTYVBJMeHsJ38n1eiFrW7ojJ5VKmZ9veM6CAlAI2PgJyBfAMJLQPXfkJnOg1GbZf6gIirrp_YlByDXZymiLxgVgVtVdG5I8BkQvvnw/s640/menuccs5.gif" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: justify;">
Sepertinya ini yang disebut New Ribbon GUI </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
Setting project seperti di bawah ini<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqMSnmkZn22hZMoxgHlIiq_dwCuThCZaZtoVItNryMJRHqB8xrJWvbV2khWBE_UssJC0PlvntD_68zPI-mVlyTvHqzNID5TGL4SIiMTEZ-a9L02wles5lwDm2F2ivlWE-nkttkiVYfbw4/s1600/designsetting.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqMSnmkZn22hZMoxgHlIiq_dwCuThCZaZtoVItNryMJRHqB8xrJWvbV2khWBE_UssJC0PlvntD_68zPI-mVlyTvHqzNID5TGL4SIiMTEZ-a9L02wles5lwDm2F2ivlWE-nkttkiVYfbw4/s400/designsetting.jpg" width="400" /></a></div>
<br />
Hebat CCS 5, sekarang dilengkapi dengan Design.. Dipilih, dipilih...<br />
<br />
<br />
<h3>
Review.</h3>
Tidak banyak review saya, setelah coba menggunakan, memang awalnya agak gagap karena letak menu yang berubah tetapi tidak lama. Konsep kerjanya masih tetap nyaman untuk digunakan. Sepertinya pembuat software ini bercita-cita untuk membuat segalanya menjadi otomatis, tanpa penulisan scripts.<br />
Saya tidak mencoba semua, tetapi yang umumnya saya pakai saja untuk aplikasi yang sedang dikerjakan.<br />
<br />
<br />
Setelah beberapa waktu mencoba, maka ketemu problem di dependent listbox. Tidak berfungsi seperti versi yang biasa saya gunakan. mungkin karena belum terbiasa atau memang perlu di update. Terlihat ada update baru yang ada di yessoftware.com. Sepertinya urusan kecil saja dependent listbox ini, akan tetapi karena pekerjaan yang saya garap ini memerlukan banyak dependent listbox maka terasa mengganggu.<br />
Beberapa cara telah dicoba tetapi masih belum sukses. yang sukses adalah tidak menggunakan fasilitas dependent listbox di CCS 5, gunakan jquery atau javascripts. hehehe.<br />
<br />
<br />
Jadi, demi percepatan jalannya pekerjaan, saya putuskan untuk kembali menggunakan CCS4. Jika Anda tau mengatasi problem ini, baik sekali jika mau memberi tahu saya. <br />
<br />
Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-3112901150500350042.post-50425130697696346852013-05-31T08:56:00.000+07:002013-05-31T09:12:29.895+07:00Pakai SetText bukan EchoPenggunaan echo di php untuk menampilkan text atau variable sudah sangat umum. Dalam contoh-contoh tutorial php, kode berikut sangat legendaris<br />
<br />
<?php <br />
Echo "Hello, World!";<br />
?> <br />
<br />
<a name='more'></a><br />
<br />
Dalam codecharge, kita juga dapat menggunakan fungsi echo tersebut. Tidak seperti umumnya penulisan tag php, di ccs ini dapat dimuat di dalam events. Jika kita menggunakan echo di ccs (menggunakan events), maka hasilnya akan ditampilkan diatas halaman kita, tepat di atas template dengan background warna putih. Bukan pada tempat yang diinginkan. Lebih baik menggunakan fungsi SetText().<br />
<br />
Untuk menggunakan settext ini, buatlah satu label, misal kita beri nama "hello". Kemudian pada events beforeshow gunakan :<br />
<span style="background-color: yellow;">$hello->SetText("Hello, world!");</span><br />
Maka tulisan Hello, world! akan tampil pada tempat kita meletakkan label tersebut.Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-3112901150500350042.post-1652659702481135932013-05-04T14:39:00.000+07:002013-05-04T14:41:09.970+07:00Backlinks Otomatis SEO Friendly di www.ngelink.net<b>My current projects with codecharge</b><br />
Sebulan lebih tidak update blog ini. Saya sedang menyibukkan diri membangun web baru di <a href="http://www.ngelink.net/" target="_blank">www.ngelink.net</a>. Mewuudkan ide yang sudah lama ingin di realisasikan. Meskipun masih belum sempurna, tetapi sudah dapat digunakan. <b>Gratis!</b><br />
Konsepnya sederhana saja:<br />
<br />
<a name='more'></a><br />
<br />
di ngelink.net :<br />
<ol>
<li>Peserta adalah pemilik/administrator website</li>
<li>Yang mendaftarkan webnya dan mendownload kode PHP kecil untuk dipasang di webnya masing-masing.</li>
<li>Jika kode sudah dipasang, peserta dapat memasang backlinksnya (just 1 click) ke website lain yang juga memasang kode.</li>
<li>ngelink.net menyiapkan halaman khusus, namanya ClickPoint. Di halaman ini peserta yang login dapat mengunjungi web peserta lainnya untuk mendapatkan point. Point ini berguna untuk menjaga agar backlink tetap aktif dan meningkatkan urutan websitenya.</li>
<li>Point juga didapatkan jika ada pengunjung yang berkunjung ke halaman backlinkspage peserta (halaman yang dipasang kode PHP).</li>
<li>Jika 5 hari tidak ada pengunjung ke backlinkspage ini, backlinks peserta nonaktif sementara sampai ada pengunjung.</li>
<li>Meta Robot Nofollow tidak diperkenankan, sehingga backlinks dapat efektif meningkatkan ranking di search enginee.</li>
<li>Support CMS seperti joomla, wordpress dll. (blogspot masih belum ketemu caranya). Saat ini masih bekera baik di server hosting yang dapat menjalankan PHP. Untuk yang menggunakan ASP, sabar ya masih belum dibuat kodenya.</li>
<li>Lebih detilnya, silahkan kunjungi <b><a href="http://ngelink.net/" target="_blank">www.ngelink.net</a></b></li>
</ol>
Saya berharap dengan ngelink.net kita dapat bersama-sama meningkatkan pengunjung web-web peserta dan berdampak pada.... transaksi....Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-6329809259065947302013-03-12T15:21:00.000+07:002013-03-14T11:07:11.583+07:00Menambahkan Facebook Comment di Page DinamisUmumnya, website dinamis menggunakan kode PHP, ASP dan lainnya. Banyak keuntungan yang didapatkan dari membuat halaman dinamis. Dengan membuat satu halaman saja yang isinya mengambil dari database maka kita akan memiliki jumlah halaman yang banyaknya sejumlah data yang dimuat tersebut.<br />
<a name='more'></a><br />
Sangat mudah untuk mengenali halaman dinamis, biasanya di urlnya memiliki variable yang ditandai dengan "<b>?</b>". Meskipun saat ini para web developer yang sangat cerdas telah memanipulasi penggunaan variable pada url dengan menggunakan rerwrite rule pada file .htaccess kita masih dapat mengenali suatu halaman merupakan halaman dinamis atau tidak.<br />
<br />
Terima kasih kepada facebook yang telah memberikan kita kesempatan untuk menambahkan fasilitas komentarnya di halaman kita. Meskipun jika dilihat dari kode yang diberikan kita harus menempatkannya pada url yang statis. Bersukur kepada para pengembang kode, hingga kita dapat mengakali hal tersebut.<br />
<br />
Lihatlah contoh kode dari gambar dari facebook ini.<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggD7MdmRDdXtnr-p3NIRWtAdvtNPr_8NadM7TtD6ompLHTmp8XLmoXREkcoHz23haOYjvgqz8QSPj-mT6f83cLe3a_GmqeAuRG-5EbHrpgh5IYzEAjDJaY9agE_pMySeI6rwEygnLQ_hg/s1600/fbcomment.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggD7MdmRDdXtnr-p3NIRWtAdvtNPr_8NadM7TtD6ompLHTmp8XLmoXREkcoHz23haOYjvgqz8QSPj-mT6f83cLe3a_GmqeAuRG-5EbHrpgh5IYzEAjDJaY9agE_pMySeI6rwEygnLQ_hg/s1600/fbcomment.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">http://developers.facebook.com/docs/reference/plugins/comments/</td></tr>
</tbody></table>
<br />
Dengan klik pada "Get Code" kita akan mendapatkan kode seperti berikut:<br />
<br />
<blockquote class="tr_bq">
<span style="background-color: #fce5cd;"><div id="fb-root"></div></span><br />
<span style="background-color: #fce5cd;"><script>(function(d, s, id) {</span><br />
<span style="background-color: #fce5cd;"> var js, fjs = d.getElementsByTagName(s)[0];</span><br />
<span style="background-color: #fce5cd;"> if (d.getElementById(id)) return;</span><br />
<span style="background-color: #fce5cd;"> js = d.createElement(s); js.id = id;</span><br />
<span style="background-color: #fce5cd;"> js.src = "//connect.facebook.net/<b style="background-color: yellow;">id_ID</b>/all.js#xfbml=1";</span><br />
<span style="background-color: #fce5cd;"> fjs.parentNode.insertBefore(js, fjs);</span><br />
<span style="background-color: #fce5cd;">}(document, 'script', 'facebook-jssdk'));</script></span></blockquote>
(kode di atas diletakkan setelah tag <body>)<br />
<br />
Jangan lupa untuk mengganti <span style="background-color: yellow;">ID</span> dengan ID aplikasi yang bisa didapatkan di http://developers.facebook.com. Dan<br />
<blockquote class="tr_bq">
<span style="background-color: #fce5cd;"><div class="fb-comments" data-href="http://example.com" data-width="470" data-num-posts="10"></div></span></blockquote>
(diletakkan pada tempat yang kita ingin comment facebook muncul).<br />
<br />
<br />
Permasalahannya adalah, jika kita menggunakan halaman dinamis, yang isinya berubah-ubah sesuai variable tetapi sebenarnya halamannya cuma satu saja.<br />
misalnya http://www.abcdefgh.com/index.php?var1=xyz<br />
<br />
Kita menginginkan agar comment tersebut mengomentari isi dari halaman dalam url di atas adalah isi dari variable xyz. Tentunya di halaman ini juga jika variable berubah menjadi index.php?var1=klm maka isinya juga akan berubah.<br />
<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script></div>
<br />
<b>Caranya di CodeCharge Studio:</b><br />
pada tempat kita ingin meletakkan comment facebook tersebut, buatlah satu Label menggunakan Toolbox Form. beri nama "comment"<br />
<br />
Kemudian pada Page Event, Add Event di Before Show. Tulis kode berikut:<br />
<br />
<span style="background-color: #fce5cd;">global $comment;</span><br />
<span style="background-color: #fce5cd;">$url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];</span><br />
<span style="background-color: #fce5cd;">$comment->SetText("<div class='fb-comments' data-href='$url' data-num-posts='20' data-width='470' data-colorscheme='dark'></div>");</span><br />
<br />
Selesai. Silahkan preview.<br />
<br />
<br />
<br />Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-3112901150500350042.post-33166072514237300552013-02-05T14:25:00.000+07:002013-02-05T14:25:50.385+07:00Seperti google+ dan facebook.. add friendMencontoh google+ dan facebook yang memiliki fitur hubungan antar anggota, saya coba cara sederhana membuat hubungan antar anggota. Menggunakan tabel kategori yang telah ada dan membuat satu tabel database yang saya beri nama tabel "relasi". Rencananya, anggota dapat menambahkan anggota yang lain sebagai teman, saudara dan lainlain. Anggota yang diajak tersebut dapat menyetujui atau tidak.<br />
<br />
<a name='more'></a>Pertama yang harus dibuat adalah tabel relasi. silahkan lihat gambar berikut.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtKL2v5V_RR2vRnhzs-KKNbknY6Xklm02W8bjAEBsLlyic9J-KIXB_v6RkDl1P85_mtFdLWGUB4jgcZFgrjtIEtXLQ_4hpYdVHbJ02yJ8PkOKNQkpe2HfCvvHTpoYrVqFqZ_N7p3TczlU/s1600/relasi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtKL2v5V_RR2vRnhzs-KKNbknY6Xklm02W8bjAEBsLlyic9J-KIXB_v6RkDl1P85_mtFdLWGUB4jgcZFgrjtIEtXLQ_4hpYdVHbJ02yJ8PkOKNQkpe2HfCvvHTpoYrVqFqZ_N7p3TczlU/s1600/relasi.png" height="140" width="400" /></a></div>
<span id="goog_383039063"></span><span id="goog_383039064"></span><br />
<span id="goog_383039063">Kemudian pada codecharge studio, buat halaman baru dengan nama "add_teman".</span><br />
<span id="goog_383039063">Buatlah Daftar Anggota dilengkapi dengan Search. Daftar ini tidak menampilkan anggota yang sedang login. caranya, pada Visual Query Builder </span>atur kondisi WHERE:<br />
idteman < > UserID (session). Gunakan "nama" sebagai link untuk mengisi form.<br />
<br /><div class="separator" style="clear: none; float: left;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
Buat Form untuk memuat "relasi antar teman", gunakan "Form Builder" dengan sumber data tabel "relasi" yang telah kita buat. Form ini adalah restricted=yes. Artinya hanya bisa dilihat oleh anggota yang login. Hal ini diperlukan agar kita dapat mengambil id anggota tersebut dalam form.<br />
Atur di events "Before Show" -> "Add Action" > "Retrieve Value for Control".<br />
Atur control name "idlogin" source type "session", source name "UserID".<br />
<br />
Untuk kategori parent dan sub kategori, gunakan "ListBox" dengan data source tabel kategori.<br />
Pada kategori parent tentukan kondisi WHERE parent=0. Kemudian gunakan "Feature Builder" untuk membuat "Dependent List".<br />
<br />
Di bawah form dapat dibuat daftar teman yang sudah diajak sebagai relasi. Lihat gambar di bawah ini.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0TNhsozGclNTnUvjIxxEve9F3ldvxsMfBUQCKGaxVxv3dZaqnCA4gKTdTQCycAtdN1NtG2p7rE0OQtnDvPEdzyhcJDs265u52T5ZGZflSbF-cNiD7MujNaqt1cfSGfj-ODar4o_jGBA/s1600/relasi1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0TNhsozGclNTnUvjIxxEve9F3ldvxsMfBUQCKGaxVxv3dZaqnCA4gKTdTQCycAtdN1NtG2p7rE0OQtnDvPEdzyhcJDs265u52T5ZGZflSbF-cNiD7MujNaqt1cfSGfj-ODar4o_jGBA/s1600/relasi1.png" height="356" width="640" /></a></div>
<br />
Sampai di sini pekerjaan di halaman ini dianggap selesai. Tentunya kita masih harus membuat "notification" kepada anggota yang diajak ber relasi agar dapat menyetujui permintaan ini.<br />
<br />
Silahkan lihat demo di <a href="http://kisahteman.id1945.com/add_teman.php" target="_blank">http://kisahteman.id1945.com/add_teman.php </a><br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-8374139797933951462013-01-25T16:03:00.000+07:002013-01-25T16:06:40.607+07:00Membuat Direktori ! (PHP MySql dengan CCS)Melanjutkan web contoh kita, saya berencana untuk membentuk kategori-kategori dalam hubungan antar teman. Hubungan-hubungan tersebut saya kelompokkan ke dalam direktori dan sub direktori.<br />
Sebelum menggunakan CodeCharge Studio, kita harus memiliki tabel yang berisi direktori. Buat tabel mysql seperti pada gambar:<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUAPvWsiWgCaEZZhltPfJpM97_MbPFqa96lGROOeVZGPx4oCkm2yHY1ZVxhm-vtZbou1A0lyLjACQKjaBz81YTNn10W5D6K2jBaVXWKPftWwpv4tlTTYhJ6dJ7q7HbdR303GA9Pc0wNjY/s1600/directory1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="directory builder" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUAPvWsiWgCaEZZhltPfJpM97_MbPFqa96lGROOeVZGPx4oCkm2yHY1ZVxhm-vtZbou1A0lyLjACQKjaBz81YTNn10W5D6K2jBaVXWKPftWwpv4tlTTYhJ6dJ7q7HbdR303GA9Pc0wNjY/s1600/directory1.png" height="283" title="directory builder" width="320" /></a></div>
<br />
Kita memerlukan halaman khusus untuk membuat direktori. Buat halaman "direktori".<br />
<br />
Gunakan Toolbox Builders, klik Directory Builder.<br />
<br />
Ikuti langkah berikut ini sesuai gambar. Kita tidak perlu membuat kode php sedikitpun.<br />
<br />
Tab pertama kita menentukan koneksi yang digunakan. <br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPgAT7N3ZBkXvRpNPc0H3-nO4dnW4GKu59m-wwRrTPhotl1JcdSfKALM9J8Czx0VYCLDpDdX-cRLoRbafqUJdPXXK2UySvahgfMgG9HQ6C_4qztmG0M-UAdLDNBZp0MOgTvTyP-XMKHA/s1600/directory2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Step creating Directory " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIPgAT7N3ZBkXvRpNPc0H3-nO4dnW4GKu59m-wwRrTPhotl1JcdSfKALM9J8Czx0VYCLDpDdX-cRLoRbafqUJdPXXK2UySvahgfMgG9HQ6C_4qztmG0M-UAdLDNBZp0MOgTvTyP-XMKHA/s1600/directory2.png" height="263" title="Step creating Directory " width="320" /></a></div>
<br />
Category table : "kategori" table<br />
Category ID field : "kategori_id"<br />
Category Name : "kategori_kisah"<br />
Parent Category : "parent"<br />
<br />
Set number of columns dengan 2 atau terserah.<br />
Tab berikutnya adalah menentukan Style<br />
<br />
Dan Finish.<br />
<br />
Mudah kan...<br />
<div class="separator" style="clear: none; float: left;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizH6j2CNZtg7hpD8_PdHLzRypg9o2IR8QUKqMVWeaF8aaxO7JlC0UQA3w3vGN_xSNnyw2EVvEWVIBDi8yDS3MlC29NObSNMVbU8fTWxux2nHlIWUsVrPY08BMNhDoyi9bHlZJ15Fs9bmw/s1600/directory3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Directory style" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizH6j2CNZtg7hpD8_PdHLzRypg9o2IR8QUKqMVWeaF8aaxO7JlC0UQA3w3vGN_xSNnyw2EVvEWVIBDi8yDS3MlC29NObSNMVbU8fTWxux2nHlIWUsVrPY08BMNhDoyi9bHlZJ15Fs9bmw/s1600/directory3.png" height="263" title="Directory style" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2p0HuIBiDo7UkGkaKNy9OudDAuF4pwKbDm_cx8f8FWSCdLwkVPywJPfarDeV8_hnoYdNkt4h02hvJsFlWviaXpfxXobZpmNRrzSzuu3VPUy8leJIv5DAUro4hm3RkzuYXWzZoGFy1YBg/s1600/directory4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Directory builder ccs" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2p0HuIBiDo7UkGkaKNy9OudDAuF4pwKbDm_cx8f8FWSCdLwkVPywJPfarDeV8_hnoYdNkt4h02hvJsFlWviaXpfxXobZpmNRrzSzuu3VPUy8leJIv5DAUro4hm3RkzuYXWzZoGFy1YBg/s1600/directory4.png" height="227" title="Directory builder ccs" width="320" /></a></div>
Silahkan lihat <a href="http://kisahteman.id1945.com/" target="_blank">online demo</a>.<br />
<br />
Post berikutnya adalah memuat data atau tabel sesuai dengan kategori dalam direktori.<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-55610043976217095932013-01-15T10:22:00.001+07:002013-01-15T10:32:39.168+07:00Membuat Gallery Photo dengan Gallery BuilderPhoto gallery atau produk galery sering diperlukan untuk menampilkan data dalam format kolom dan baris. Dengan CodeCharge Studio kita hanya membutuhkan beberapa langkah saja (tanpa sedikitpun menuliskan kode php). Gunakanlah Gallery Builder di ToolBox CCS.<br />
<br />
Buatlah halaman baru, berinama "galery". Siapkan tempat untuk meletakkan gallery photo.<br />
Klik "Gallery Builder", seperti biasa kita diminta untuk memilih koneksi yang digunakan. Kemudian memilih tabel yang akan ditampilkan. Pilih tabel "profil".<br />
<a name='more'></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXhCNb-ahBKr2vC_FcLyxg0g3w-pHoCxhJOxc25cbGPl0WtyJeXCwkP-_iOiT9euZ-5DXgZXMbLUn9NB2Uzpx_9Ko0_nzTNX5dW-4oq9iIVec-95lN0tylJc8HzsHqd-o6YeeJC7XxR50/s1600/gallery1.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Photo Gallery Builder" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXhCNb-ahBKr2vC_FcLyxg0g3w-pHoCxhJOxc25cbGPl0WtyJeXCwkP-_iOiT9euZ-5DXgZXMbLUn9NB2Uzpx_9Ko0_nzTNX5dW-4oq9iIVec-95lN0tylJc8HzsHqd-o6YeeJC7XxR50/s1600/gallery1.png" height="263" title="Photo Gallery Builder" width="320" /></a><br /><div class="separator" style="clear: none; float: left;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
Tentukan minimal dua fields, pertama sebagai Link, kedua sebagai "Image". Dalam contoh ini kita pilih field "nama" sebagai link dan field "photo" sebagai image. Lihat gambar.<br />
<br />
Jika memerlukan form "search" bisa di tentukan di langkah selanjutnya. Kita akan buat form search dengan field "nama" sebagai "search field".<br />
<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDOZwF5jbuyQhIp8Y9IXBmquInqs_LN9O_y3JJUzygJsxj3dZsxGAAlSJobFy4HuKH0IgZT1lUlc4piazzldLBGwYyiM579Qh_YK4KQttjDh8vKjvLG7orUO0GqpY1HOhKkpMJakOYYPE/s1600/gallery2.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Setup Gallery photo " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDOZwF5jbuyQhIp8Y9IXBmquInqs_LN9O_y3JJUzygJsxj3dZsxGAAlSJobFy4HuKH0IgZT1lUlc4piazzldLBGwYyiM579Qh_YK4KQttjDh8vKjvLG7orUO0GqpY1HOhKkpMJakOYYPE/s1600/gallery2.png" height="263" title="Setup Gallery photo " width="320" /></a>Berikutnya, step 4/6, "define gallery options" kita akan menentukan beberapa hal seperti jumlah kolom dan jumlah baris yang diinginkan, folder photo dan ukuran dari image photo yang diinginkan. Lihat gambar.<br />
<br />
Langkah selanjutnya adalah menentukan bentuk navigasi dan sortir yang diinginkan. Kita dapat menentukan untuk menggunakan sortir atau tidak. Kita dapat memilih berbagai bentuk navigasi, text atau image bahkan untuk tidak menggunakan navigasi.<br />
<br />
Langkah terakhir dari Gallery Builder ini adalah menentukan Style....<br />
Finish. Seperti gambar berikut.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZiaJpDmf9QFhyqdMFIGddqUN5iy2jtzhOciDGKh9YBcCGjbt0aTRF9cNNFolJTb-dTQv-C3MN1gVGImIvK-kmw_r0wpS-KewZqZjdqaR39j3I-Ifbhv-4VIkMLQ2Wantq5wkSYjB5zEQ/s1600/gallery3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Design Gallery Photo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZiaJpDmf9QFhyqdMFIGddqUN5iy2jtzhOciDGKh9YBcCGjbt0aTRF9cNNFolJTb-dTQv-C3MN1gVGImIvK-kmw_r0wpS-KewZqZjdqaR39j3I-Ifbhv-4VIkMLQ2Wantq5wkSYjB5zEQ/s1600/gallery3.png" height="278" title="Design Gallery Photo" width="320" /></a></div>
Tambahkan link ke halaman gallery photo ini di flash menu kita.<br />
<br />
Test drive at <a href="http://kisahteman.id1945.com/gallery.php" target="_blank">http://kisahteman.id1945.com/gallery.php</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-60342642723044019472013-01-10T11:01:00.000+07:002013-01-10T11:18:39.307+07:00Membuat Tabel WebList dengan Report BuilderSekarang kita akan membuat daftar website milik anggota dengan menggunakan fasilitas "Report Builder" yang ada di ToolBox CodeCharge Studio. Pada posting sebelumnya di <a href="http://id-codecharge.blogspot.com/2013/01/membuat-editable-grid-form.html" target="_blank">Membuat Editable Grid Form</a>, kita sudah selesaikan form untuk Add Website dalam bentuk grid form. Umumnya di CCS sebuah tabel dibuat menggunakan Grid Builder. Sekarang kita akan menggunakan Record Builder agar terlhat pengelompokan alamat web berdasarkan pemiliknya. Lihat cara mudah berikut.<br />
<a name='more'></a>Buat halaman baru, berinama "weblist". Ikuti proses berikut. Kita hanya perlu mengikuti wizard saja<br />
<br />
<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<ul>
<li>Klik Report Builder, select connection1</li>
<li>Masuk ke Build Query, tambahkan tabel "webteman" dan tabel "profil", sebuah koneksi akan tercipta atur join type "Right" </li>
<li>WHERE kondisi, webteman.activ=1 (expression)</li>
<li>OrderBy idweb Desc</li>
<li>Build Query selesai, langkah selanjutnya</li>
<li>Masukkan nama dan title_web ke kolom Selected field </li>
<li>Group by "nama"</li>
<li>Tentukan Layout Report (saya pilih Group Outline)</li>
<li>Tentukan bentuk Sorting dan Navigasi yang disukai</li>
<li>Tentukan line per page, default 40 line</li>
<li>Penomoran data per nama atau per web? silahkan pilih</li>
<li>Check list "Create Search" kita akan memerlukan form pencarian</li>
<li>Kita pilih field url dan title_web</li>
<li>Pada pilihan Advanced, pilih "Single search field with OR condition"</li>
<li>Tentukan Style</li>
<li>Report hampir Selesai.</li>
</ul>
Perhatikan field title_web, masih belum memiliki link ke url web. Ganti Label title_web menjadi Link.<br />
Atur properti Link ini seperti pada gambar<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsBDUNJicwA_mMYnft1o54yCUqrrYldFdRh_s1nqu7dkDUrgU89oUmZmz9WMQ3wc_CuIWcWIx9eE7T__ItJN3iaHi5Cea5_NGs7VKYoelVhmK8AalIDKRbx8zxYmCgQ8fFKM2URMfnho/s1600/gridform3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Link Source from database" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsBDUNJicwA_mMYnft1o54yCUqrrYldFdRh_s1nqu7dkDUrgU89oUmZmz9WMQ3wc_CuIWcWIx9eE7T__ItJN3iaHi5Cea5_NGs7VKYoelVhmK8AalIDKRbx8zxYmCgQ8fFKM2URMfnho/s1600/gridform3.png" height="235" title="Link Source from database" width="400" /></a></div>
Jadinya seperti ini di halaman <a href="http://id-codecharge.blogspot.com/2013/01/membuat-tabel-weblist-dengan-report.html" target="_blank">weblist.php</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DmhEE8Moib8y3ETDyBDXtRaqri962FdbSrS-pDqYSN5C72IRgLHzLgffs240jADCRc2fiF8FF0GDhJNh_Sx6Eopcv9sdp8S70rg2QGKF7ax4Xfpvhqt9wba73WizxGiKJ6dyFYKyLh4/s1600/gridform4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DmhEE8Moib8y3ETDyBDXtRaqri962FdbSrS-pDqYSN5C72IRgLHzLgffs240jADCRc2fiF8FF0GDhJNh_Sx6Eopcv9sdp8S70rg2QGKF7ax4Xfpvhqt9wba73WizxGiKJ6dyFYKyLh4/s1600/gridform4.png" height="205" width="320" /></a></div>
Jangan lupa untuk menambahkan halaman ini pada daftar menuUnknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-8822004926780483942013-01-10T09:38:00.000+07:002013-01-10T09:53:32.393+07:00Membuat Editable Grid FormJika umumnya suatu form diperuntukkan mengisi satu data maka editable grid form ini adalah form berbentuk grid yang dapat langsung diisi beberapa data entry sekaligus. Di dalam CodeCharge Studio membuat grid form bisa sangat mudah dan cepat. Kita memerlukan data/table baru untuk mencontohkannya.<br />
Saya sudah menambahkan tabel baru yakni table "webteman" ke dalam database mysql. Tabel ini akan memuat daftar website yang dimiliki oleh member. Ikuti langkah selanjutnya.<br />
<a name='more'></a><br />
Dump file tabel "webteman" sebagai berikut<br />
<br />
<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<blockquote class="tr_bq">
<span style="font-size: x-small;"><div class="separator" style="clear: none; float: right;"><br /><script type="text/javascript"><!--<br />google_ad_client = "ca-pub-0670400618005693";<br />/* belajarcodecharge */<br />google_ad_slot = "0303953346";<br />google_ad_width = 336;<br />google_ad_height = 280;<br /><br /></script><br /><script type="text/javascript"<br />src="http://pagead2.googlesyndication.com/pagead/show_ads.js"><br /></script><br /></div></span></blockquote>
Setelah tabel selesai dibuat, kita perlu halaman untuk memuat grid form ini. Saya gabungkan saja form ini di halaman "updateprofil". Tepatnya di bawah form "update profil".<br />
<br />
<br />
Gunakan Tool Box, Editable Grid Builder.<br />
<ol>
<li>Pilih connection</li>
<li>Gunakan tabel "webteman" Pilih semua selain "idweb"</li>
<li>Pada Build Query, tentukan kondisi WHERE, atur parameter idteman = "UserID" type Session (ini akan membatasi data yang ditampilkan pada grid form adalah milik member yang login).</li>
<li>Tidak memerlukan "Search"</li>
<li>No Sorting, No Navigator, Record per Page = 5</li>
<li>Number of Empty Row = 1</li>
<li>Tentukan Style</li>
<li>Finish </li>
<li>Hide field "idteman"</li>
<li>Set Default Value pada field url "http://" </li>
<li>Atur properties Events, klik kanan pada "Before Show Row" pilih "Add Action", pilih "Retrieve Value for Control".. </li>
</ol>
<ul>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS0QdxNKAyB-FW6zfZvRNoMIeg5H99Ejnvi3NOeN_6_eNtRUatFHRXKFtd3PAkRnke4uOaDmsWTu4vCvv8oOIGGeTJL-DjeoVFRROP7CdLYzdAGalU28hG_L14mqRXG9X7fPFuwODphL8/s1600/gridform1.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Editable Grid Builder" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS0QdxNKAyB-FW6zfZvRNoMIeg5H99Ejnvi3NOeN_6_eNtRUatFHRXKFtd3PAkRnke4uOaDmsWTu4vCvv8oOIGGeTJL-DjeoVFRROP7CdLYzdAGalU28hG_L14mqRXG9X7fPFuwODphL8/s1600/gridform1.png" title="Editable Grid Builder" /></a>
<li>Control name : idteman</li>
<li>Source Type Session</li>
<li>Source name : UserID</li>
</ul>
Seperti pada gambar:<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Tampilan pada localhost sebagai berikut:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRO9mNpC5hrPtlks_RETTjROF4R6z7iv5rx2h-4GEUcQoEgr0ZDbR5w4F5uh4qP5d1ICZDG0E3-zJEF19cSbKcGUUFZ7nqak7U5hu6nG2Ze_QkbvDHt56IP1CqoXVoCkxQ-PTeuEfcjF8/s1600/gridform2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Add your Website" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRO9mNpC5hrPtlks_RETTjROF4R6z7iv5rx2h-4GEUcQoEgr0ZDbR5w4F5uh4qP5d1ICZDG0E3-zJEF19cSbKcGUUFZ7nqak7U5hu6nG2Ze_QkbvDHt56IP1CqoXVoCkxQ-PTeuEfcjF8/s1600/gridform2.png" height="62" title="Add your Website" width="400" /></a></div>
Terlihat ada satu baris saja, akan tetapi jika sudah dimuat data maka akan muncul baris kosong baru.<br />
<br />
Silahkan di coba di <a href="http://kisahteman.id1945.com/" target="_blank">http://kisahteman.id1945.com</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-82104321501366319592013-01-08T09:32:00.000+07:002013-01-10T07:37:47.391+07:00Mengganti Form Register dengan Text "Anda Sudah Terdaftar"Pada post sebelum ini, kita sudah berhasil <a href="http://id-codecharge.blogspot.com/2013/01/menghilangkan-form-login-jika-member.html" target="_blank">menghilangkan form login jika member sudah login</a>. Sekarang kita akan membuat form register juga menghilang saat member sudah login. Tujuannya adalah agar member yang sudah login tidak dapat mendaftar lagi dengan email yang lain.<br />
<br />
Kali ini kita akan menukar form register tersebut dengan kalimat "<b>Anda sudah terdaftar dengan email : emailmember@domain.com</b>"<br />
<br />
<a name='more'></a><br /><br />
Dengan CodeCharge Studio kita buka halaman register. Seperti pada form login, kita atur:properties form register sbb:<br />
<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<ul>
<li>Restricted = Yes</li>
<li><b><span style="background-color: orange;">UnCheck</span></b> Member, admin dan level lainnya jika ada</li>
<li>Lihat Code php, di register.php cari tulisan berikut</li>
</ul>
<blockquote class="tr_bq">
<span style="background-color: yellow;">$this->Visible = (CCSecurityAccessCheck("1;2") <span style="background-color: orange;">==</span> "success");</span><br />
ganti menjadi</blockquote>
<br />
<blockquote>
<span style="background-color: yellow;">$this->Visible = (CCSecurityAccessCheck("1;2") <span style="background-color: orange;"><></span> "success");</span></blockquote>
Kemudian, dibawah form register buatlah Grid table dari tabel data profil. Kita akan menampilkan email anggota yang sedang login. Lihat gambar berikut:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9651chsscho4Xv1d_V28cCuEEzVJy79J0HhtDdMFY0pTvEIoa62ixOM1ktdVCWKW2FwPx5bnMC_RuMSaprR3AgedSyUk7HwFam1zc2sdwmqxsdA9p2x5dCJxyngCKM4v_tjinaQhDQMA/s1600/register3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="replace register form" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9651chsscho4Xv1d_V28cCuEEzVJy79J0HhtDdMFY0pTvEIoa62ixOM1ktdVCWKW2FwPx5bnMC_RuMSaprR3AgedSyUk7HwFam1zc2sdwmqxsdA9p2x5dCJxyngCKM4v_tjinaQhDQMA/s1600/register3.png" height="137" title="replace register form" width="400" /></a></div>
Gunakan table profil sebagai sumber data<br />
Pilih hanya field email<br />
Tambahkan teks "Anda Sudah Terdaftar Dengan Email : "<br />
Atur kondisi WHERE idteman (integer) = UserID (Session)<br />
Atur Restricted = Yes, check Admin dan Member (all level).<br />
<br />
Selesai. Sekarang pengunjung dapat melihat dan mempergunakan form register. Jika pengunjung sudah login maka dia tidak dapat melihat form register tetapi dapat melihat notifikasi bahwa dia sudah terdaftar dengan emailnya.<br />
Silahkan dicoba demo online di <a href="http://kisahteman.id1945.com/" target="_blank">http://kisahteman.id1945.com/</a><br />
<br />
<br />
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-10807483331050156102013-01-06T11:45:00.000+07:002013-01-10T07:38:32.425+07:00Menghilangkan Form Login Jika Member Sudah Login<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
Kita akan menghilangkan Form Login jika member sudah berhasil Login. Ada beberapa cara, misalnya dengan membuat pengaturan pada Events "Before Show". Pada contoh ini, saya coba memberikan cara lain yang menurut saya sangat sederhana untuk menghilangkan form login jika member sudah sukses login.<br />
<br />
Ikuti beberapa langkah sederhana berikut.<br />
<br />
<a name='more'></a><br />
<ol>
<li>Atur properties form login; Restricted = Yes, check All (member, admin)</li>
<li>Masuk ke mode Code, pada bagian "Login; Show Method" cari:</li>
</ol>
<br />
<blockquote class="tr_bq" style="background-color: yellow;">
function clsRecordLogin($RelativePath, & $Parent)<br />
{...... </blockquote>
<blockquote class="tr_bq" style="background-color: yellow;">
<b>$this->Visible = (CCSecurityAccessCheck("1;2") <span style="color: red;">==</span> "success");</b></blockquote>
<br />
ganti dengan<br />
<br />
<blockquote class="tr_bq">
<b><span style="background-color: yellow;">$this->Visible = (CCSecurityAccessCheck("1;2") <span style="color: red;"><></span> "success"); </span></b></blockquote>
Selesai. Sekarang hanya pengunjung yang belum Login saja yang dapat melihat dan menggunakan Form Login.<br />
<br />
Lakukan juga hal yang sama pada Form Registrasi di halaman register. Tentu saja kita harus menghilangkan form Register dari pandangan member yang sudah login. Karena setiap member yang login pasti sudah register.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-3112901150500350042.post-82269971458010735492013-01-05T16:57:00.000+07:002013-01-10T07:40:54.958+07:00Menampilkan Nama Member yang Login<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
Punya akun email yahoo atau google mail? Di pojok atas selalu menampilkan nama atau email yang sedang login, Kita mau juga membuat yang seperti itu.<br />
Pada header akan kita tampilkan email member yang sedang login dan link logout. Email dan link logout itu hanya akan tampil jika member sudah login.<br />
<br />
Halaman yang akan kita gunakan adalah halaman "header". Buat satu kolom di samping kanan menu. Tambahkan Grid dari tabel profil.<br />
<br />
<a name='more'></a><br /><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS61-rWbrIHo1vGPXlXYWljg6zp7_8pdWlu2m4nAgwHwSOqAizT88qAvdGqTxDD6aW0sZtn0c2ERyH5c22OeXbQVaTXJ8tUgPI1aWbNiL6Gfi6i-QMPvjD3MN_43rGubMrBpt1pKJEI3M/s1600/login5.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="show member login as" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS61-rWbrIHo1vGPXlXYWljg6zp7_8pdWlu2m4nAgwHwSOqAizT88qAvdGqTxDD6aW0sZtn0c2ERyH5c22OeXbQVaTXJ8tUgPI1aWbNiL6Gfi6i-QMPvjD3MN_43rGubMrBpt1pKJEI3M/s1600/login5.jpg" height="182" title="show member login as" width="400" /></a></div>
di query builder atur kondisi WHERE idteman (integer) = UserID (session), default = 0.<br />
<br />
Di Grid profil properties, atur <br />
Restricted = Yes, check all member and admin level.<br />
<br />
Tampilan pada halaman header seperti gambar di bawah ini.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLRAe1fOs3iFdilkB9Azo-DOuf7e67ypOe0uIAdkvcBZY2OJydPxa-nLvsHTL_lnTMyrOhJjiIKJTC4CMhVa0aFFPfmulq3yvUWm-Hd477RfE1I8cpLC2RsLxLZc0mQBkbckYCNqcUwzo/s1600/login6.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="grid login member" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLRAe1fOs3iFdilkB9Azo-DOuf7e67ypOe0uIAdkvcBZY2OJydPxa-nLvsHTL_lnTMyrOhJjiIKJTC4CMhVa0aFFPfmulq3yvUWm-Hd477RfE1I8cpLC2RsLxLZc0mQBkbckYCNqcUwzo/s1600/login6.jpg" height="106" title="grid login member" width="400" /></a></div>
<br />
Tambahkan teks "Login As:"<br />
Insert label link logout to custom page yakni ke halaman logout.<br />
<br />
Silahkan coba login secara online di <a href="http://kisahteman.id1945.com/" target="_blank">http://kisahteman.id1945.com</a> <br />
<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-58025657160214622792013-01-03T16:42:00.000+07:002013-01-10T07:41:17.094+07:00Get Password Form<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
Hampir disetiap form login juga terdapat link "Lupa Password" dalam berbagai bentuk dan tulisan. Intinya adalah memberikan fasilitas kepada member untuk mendapatkan passwordnya kembali (seringkali lupa). Untuk mendapatkan passwordnya kembali, member diminta untuk mengisi data email atau username. Kemudian server akan mengirimkan password member tersebut melalui email yang sudah tercatat di database. Jika email tersebut belum tercatat maka form akan memberitahu bahwa email atau username tersebut belum terdaftar.<br />
<br />
<a name='more'></a><br /><br />
Sebelum membuat halaman lupa password menggunakan CodeCharge Studio, kita perlu menyiapkan tabel database untuk mencatat siapa dan kapan permintaan lupa password ini digunakan. Buatlah tabel baru di mysql, kira-kira seperti berikut (silahkan berkreasi sesuai keperluannya):<br />
<br />
<blockquote class="tr_bq">
<span style="font-size: x-small;">CREATE TABLE IF NOT EXISTS `lupapass` (<br /> `idlupa` int(11) NOT NULL AUTO_INCREMENT,<br /> `email` varchar(256) NOT NULL,<br /> `date` datetime DEFAULT NULL,<br /> PRIMARY KEY (`idlupa`)<br />) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;</span></blockquote>
<br />
<h3>
Membuat Form Lupa Password Menggunakan CodeCharge Studio</h3>
<ul>
<li>Saya membuat satu halaman baru, bernama "getpassword".</li>
<li>Menggunakan Toolbox - Record Builder untuk membuat form dari tabel lupapass. Ambil field <b>email </b>dan <b>date </b>untuk fields record, (field Date di hidden).</li>
<li>Action di form ini hanya Insert dan Cancel</li>
<li>Atur Input Validation untuk email : Email (^[\w\.-]{1,}\@([\da-zA-Z-]{1,}\.){1,}[\da-zA-Z-]+$)</li>
<li>Atur format date: dd/mm/yyyy</li>
<li>Date default : CurrentDateTime</li>
<li>Date dbformat : yyyy-mm-dd HH:nn:ss</li>
<li>Ganti tulisan "Add" pada buton menjadi "Kirimkan password Saya". Caranya, klik kanan pada button, pilih <Input> Properties </li>
<li>Setelah jadi, seperti gambar berikut:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTYnQj2qSVFayxV5y3E7j5rdtKo3fJzOROiV0Wfo4KSos1qmfEjQNEaa5uqy7uGTxvxOOs1J8B4FJPERl1kDbNnOp2gzxdfZhP74nkO7o0GP6OxHNOwEXj3Hf9qqLZcnzZlws-_1wqf-g/s1600/lupa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTYnQj2qSVFayxV5y3E7j5rdtKo3fJzOROiV0Wfo4KSos1qmfEjQNEaa5uqy7uGTxvxOOs1J8B4FJPERl1kDbNnOp2gzxdfZhP74nkO7o0GP6OxHNOwEXj3Hf9qqLZcnzZlws-_1wqf-g/s1600/lupa.png" height="110" width="320" /></a></div>
<ul>
<li> Sekarang masuk ke Events Record : lupapass. Tambahkan "Custom Code" pada "After Execute Insert" </li>
<li>Copykan kode berikut (silahkan berkreasi)</li>
</ul>
<blockquote class="tr_bq">
<span style="font-size: x-small;"><span style="color: lime;">// -------------------------</span><br />$db = new clsDBConnection1();<br />$db->query("SELECT * FROM profil WHERE email=\"" . $lupapass->email->Value . "\"");<br />$db->next_record();<br />if ( $db->f("idteman") == "") {<br />$lupapass->Errors->AddError("Maaf, E-mail anda tidak ada dalam catatan kami.");<br />}<br /><br />$to = $db->f("email");<br />$from = "email@yourdomain.com";<br />$additional_headers = "From: $from\nReply-To: $from";<br />$subject = "Re: Lupa Password yourdomain.com";<br />$message = "Atas permintaan Anda, berikut kami kirim informasi login di kisahteman.id1945.com.\n".<br />"\n".<br />"Username: " .$db->f("email") . "\n" .<br />"Password: " .$db->f("password") . "\n" .<br />"\n".<br />"\n".<br />"email@yourdomain.com\n".<br />"";<br />"\n".<br /><br />mail ($to, $subject, $message, $additional_headers);<br /><br />// <span style="color: lime;">-------------------------</span></span> </blockquote>
Form Lupa Password selesai. Jangan lupa untuk membuat link Ke halaman ini. Buatlah link nya dekat dengan form Login. Kira-kira seperti ini:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjjgRUdzsWeNCZFQnKCXdXKhHT5U0ThWa6Tv-SzBaA3EiWkOwwVIX1H53EIAjndnRuwUCxXh7BdB873Om6Qiz4gGrNwirwckEN0aAjunS5hPJZqx65l6XSh9hfeP9r5HrHHhTew0rIOY/s1600/lupa2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Retrieve Password Link" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjjgRUdzsWeNCZFQnKCXdXKhHT5U0ThWa6Tv-SzBaA3EiWkOwwVIX1H53EIAjndnRuwUCxXh7BdB873Om6Qiz4gGrNwirwckEN0aAjunS5hPJZqx65l6XSh9hfeP9r5HrHHhTew0rIOY/s1600/lupa2.png" title="Retrieve Password Link" /></a></div>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-24515219639557445452013-01-02T11:32:00.000+07:002013-01-10T09:43:15.014+07:00Hosting codecharge ProjectProject website contoh "kisah teman" ini memang belum selesai. Tetapi kita sudah dapat mencobanya dengan menghosting file-file yang sudah selesai ke server hosting kita. Dalam contoh ini, saya memilihkan tempat<a href="http://api.idhostinger.com/redir/533356" target="_blank"> hosting gratis Hostinger</a> dengan domain gratis juga "<a href="http://kisahteman.id1945.com/" target="_blank">kisahteman.id1945.com</a>".<br />
<br />
<div class="separator" style="clear: none; float: left;">
<a href="http://api.idhostinger.com/redir/533356" target="_blank"><img alt="Hosting Gratis" border="0" src="http://www.idhostinger.com/banners/id/hostinger-125x125-powered-2.gif" height="125" width="125" /></a></div>
Mengapa <a href="http://api.idhostinger.com/redir/533356" target="_blank">hosting gratis di Hostinger</a>? Karena pertama ini adalah project contoh, kedua, hostinger memberikan fasilitas yang sama bahkan mungkin lebih baik dengan layanan hosting berbayar lainnya. Kita dapat saja menggunakan host gratis di hostinger dengan menggunakan domain berbayar. <br />
<br />
Saya asumsikan kawan sudah memiliki nama domain dan tempat hosting. Hal pertama yang harus dilakukan adalah<br />
<br />
<br />
<br />
<br />
<br />
<h3>
Setup Database. </h3>
Disini kita harus menentukan nama database, user, password, host database mysql. Biasanya layanan hosting memiliki fasilitas database mySQL. Masuk ke control panel, database. dst.<br />
Import database <a href="http://kisahteman.id1945.com/db/kisahteman.sql" target="_blank">kisahteman.sql</a> ke database yang telah kita buat.<br />
<br />
<a name='more'></a><br />
<br />
<h3>
Edit Common.php</h3>
Dalam project CodeCharge yang kita buat ada sebuah file penting sekali bernama Common.php. File yang di edit adalah common.php yang ada di localhost ( biasanya di c:\wamp\www\common.php ).<br />
Buka file ini dengan Notepad. Lihat dan ganti nama DB, User, Host, Password dengan yang kita buat di server sebelum ini.<br />
<br />
<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<blockquote class="tr_bq">
<span style="font-size: x-small;">$CCConnectionSettings = array (<br /> "Connection1" => array(<br /> "Type" => "MySQL",<br /> "DBLib" => "MySQL",<br /> "Database" => "<span style="background-color: yellow;">namadatabase</span>",<br /> "Host" => "<span style="background-color: yellow;">host_biasanya_localhost</span>",<br /> "Port" => "",<br /> "User" => "<span style="background-color: yellow;">userdb</span>",<br /> "Password" => "<span style="background-color: yellow;">password_db</span>",<br /> "Persistent" => false,<br /> "DateFormat" => array("mm", "/", "dd", "/", "yyyy", " ", "HH", ":", "nn", ":", "ss"),<br /> "BooleanFormat" => array(1, 0, ""),<br /> "Uppercase" => false<br /> )</span></blockquote>
<h3>
Sedikit Pengaturan File index.php dan index.html</h3>
CodeCharge Studio membuat 2 file untuk setiap halaman yang kita buat. Untuk halaman index maka CCS menciptakan index.php dan index.html untuk templatenya. Sedikit pengaturan perlu dilakukan di sini agar sesuai dengan pengaturan di server tempat hosting kita.<br />
Umumnya layanan hosting mengutamakan file index.html sebagai homepage, kemudian baru index.php, kemudian default.htm dll (beberapa layanan hosting mungkin kebalikannya, bahkan bisa kita tentukan sendiri).<br />
Di Contoh ini, Agar website kita memiliki memiliki index.php sebagai homepage saya melakukan hal sederhana sbb:<br />
1. Rename index.html menjadi indek.html (bisa saja nama lain)<br />
2. Buka index.php dengan notepad, cari index.html. Ganti index.html dengan indek.html<br />
3. Gunakan teknik ini untuk <a href="http://id-codecharge.blogspot.com/2012/12/generated-with-codecharge-studio.html" target="_blank">menghilangkan tulisan Generated with Codecharge studio</a>. <br />
<br />
<br />
<h3>
Upload menggunakan FTP</h3>
Setiap layanan hosting memberikan cara untuk mengakses server melalui ftp.<br />
<br />
<h3>
Test dengan mengunjungi domain kita. Demo project ini di <a href="http://kisahteman.id1945.com/" target="_blank">http://kisahteman.id1945.com/</a></h3>
Semoga sukses.<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-22196173090943323072013-01-02T10:24:00.001+07:002013-01-10T09:43:41.651+07:00Dependent ListBoxes Pada Form RegistrasiUntuk contoh ini, kita akan menyempurnakan <a href="http://id-codecharge.blogspot.com/2012/12/membuat-halaman-registrasi.html" target="_blank">form registrasi</a> yang telah kita buat dengan menambahkan field provinsi dan kabupaten/kota. Kedua field yang ditambahkan ini berbentuk ListBox yang telah disiapkan datanya. Jadi kita harus siapkan dulu tabel provinsi dan tabel kabupaten di database mysql kita. Kira-kira strukturnya seperti berikut:<br />
<a name='more'></a><br />
<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<br />
<span style="font-size: x-small;">CREATE TABLE IF NOT EXISTS `provinsi` (<br /> `kodeprov` int(2) NOT NULL DEFAULT '0',<br /> `provinsi` varchar(18) DEFAULT NULL,<br /> PRIMARY KEY (`kodeprov`)<br />) ENGINE=MyISAM DEFAULT CHARSET=utf8;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;">CREATE TABLE IF NOT EXISTS `kabupaten` (<br /> `kodekab` bigint(10) NOT NULL DEFAULT '0',<br /> `kab` varchar(25) DEFAULT NULL,<br /> `kodeprov` bigint(10) DEFAULT NULL,<br /> PRIMARY KEY (`kodekab`)<br />) ENGINE=MyISAM DEFAULT CHARSET=utf8;</span><br />
<br />
<ul>
<li>Download sql filenya di <a href="http://kisahteman.id1945.com/db/provkab.sql">http://kisahteman.id1945.com/db/provkab.sql</a> (memuat kode provinsi dan kode kabupaten kota seluruh Indonesia).</li>
<li>Jangan lupa menambahkan field <i><b>kodeprov</b></i> dan <i><b>kodekab</b></i> di tabel profil. Gunakan phpmyadmin untuk menambahkannya. </li>
</ul>
<br />
<br />
Setelah tabel provinsi dan kabupaten selesai, <br />
<br />
Buka halaman registrasi menggunakan CodeCharge Studio.<br />
<br />
Tambahkan dua baris untuk listbox provinsi dan listbox kabupaten. Insert Listbox menggunakan Toolbox -> form -> listbox<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNvpU8QELxjafvLgUPBAizNdypgpWBEN6Kf-wqxKXbQHshqV36SVOSYDwBpv9_bTiW-C1tWTx4xaVWks4FmVUmgqaRbklAwRSpllH4g_CqU0scUpsjehBx2zrBO31MRTZpsj4y5F91MU/s1600/listbox7.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Listbox properties" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNvpU8QELxjafvLgUPBAizNdypgpWBEN6Kf-wqxKXbQHshqV36SVOSYDwBpv9_bTiW-C1tWTx4xaVWks4FmVUmgqaRbklAwRSpllH4g_CqU0scUpsjehBx2zrBO31MRTZpsj4y5F91MU/s1600/listbox7.png" height="241" title="Listbox properties" width="320" /></a></div>
<br />
Atur properti seperti pada gambar.<br />
Name: provinsi<br />
<br />
Control source: kodeprov<br />
Data type : table <br />
Data source: provinsi<br />
Bound column : kodeprov<br />
Text Column: provinsi<br />
<br />
Buat juga hal yang sama pada listbox kodekab.<br />
<br />
<br />
<br />
<br />
<h3>
</h3>
<h3>
Membuat Dependent Listbox dengan CodeCharge Studio</h3>
Dependent listbox ini dimaksudkan agar jika pendaftar memilih provinsi maka di listbox kabupaten hanya terdapat pilihan kabupaten yang ada di provinsi tersebut. Tentunya ini akan memudahkan pendaftar untuk mengisi form registrasi.<br />
<br />
Untuk membuat dependent listbox ini, kita menggunakan fasilitas toolbox -> Feature Builder. Kita harus mengatur beberapa hal. Lihat gambar:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78AoRidGRtAHOMsqNSnqWAdQ-emDCVsP1iPqvIzY01YdDoCJ0Z4PT9HkRACIqBnquTGgnPS9Xh0gkPrTodqLR1OGSVT5Fo0LsVTycWn8uivo4h2g1IGc3U3IpWHpyTbTSiQD8xewcToU/s1600/listbox8.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Feature Builder " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78AoRidGRtAHOMsqNSnqWAdQ-emDCVsP1iPqvIzY01YdDoCJ0Z4PT9HkRACIqBnquTGgnPS9Xh0gkPrTodqLR1OGSVT5Fo0LsVTycWn8uivo4h2g1IGc3U3IpWHpyTbTSiQD8xewcToU/s1600/listbox8.png" height="215" title="Feature Builder " width="320" /></a></div>
<br />
Step 1 dari 3 step : Ceklist Dependent ListBoxes<br />
<br />
Step 2 dari 3 step : Pilih Connection1<br />
<br />
Step 3 dari 3 step :<br />
<br />
Atur seperti gambar di bawah.<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Ft7svnbKV58IuFqYJmGG3o9a1AhVgIt1_QYki-Cndsz5FfV3Hxx4TMPqDztCEHgYFSZNwhCd7hgTFJNa4mH4DoKOnX9Qmc6NxFZOxyCFLdgsHeHz6MNSUKKPn9nXRt6caS9DmjvfTvg/s1600/listbox9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="setting dependent listbox" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Ft7svnbKV58IuFqYJmGG3o9a1AhVgIt1_QYki-Cndsz5FfV3Hxx4TMPqDztCEHgYFSZNwhCd7hgTFJNa4mH4DoKOnX9Qmc6NxFZOxyCFLdgsHeHz6MNSUKKPn9nXRt6caS9DmjvfTvg/s1600/listbox9.png" height="524" title="setting dependent listbox" width="640" /></a></div>
<br />
<b>Dependent ListBox selesai</b>.Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-3112901150500350042.post-38194062992961578672013-01-01T21:44:00.002+07:002013-01-10T09:44:13.681+07:00Membuat Url Teks Dengan Parameter<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<b>Selamat Tahun Baru 2013, semoga tidak ada isu kiamat lagi di tahun ini. </b><br />
<br />
Melanjutkan artikel sebelumnya, Sekarang kita akan menghubungkan textlink "judul kisah" yang ada di halaman homepage ke halaman detil kisah. Keduanya dihubungkan dengan menggunakan parameter idkisah. Bagaimana membuat url dengan parameter, coba lihat gambar ini (klik untuk memperbesar).<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ALOoQzv94PhMCUsuYbjvbT8A04LuBqTkGY5k9kzEZKPzlld-7CK8Gr_sn-D_JaPxHCYu2s7u16yX7Zvc6ZaUVAUNw4p_Y-i3jlUNznGkut4FXZt8zCIxsdIamgWJqoPlOBMwOFqrNgg/s1600/link5.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="textlink dengan parameter" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ALOoQzv94PhMCUsuYbjvbT8A04LuBqTkGY5k9kzEZKPzlld-7CK8Gr_sn-D_JaPxHCYu2s7u16yX7Zvc6ZaUVAUNw4p_Y-i3jlUNznGkut4FXZt8zCIxsdIamgWJqoPlOBMwOFqrNgg/s1600/link5.png" height="281" title="textlink dengan parameter" width="400" /></a></div>
<br />
No 1 memperlihatkan tabel yang ada di halaman index. Select textlink "judulkisah".<br />
No. 2, Atur propertinya: Href type = Page<br />
Href Source = halaman yang dituju (detilkisah)<br />
No 3, edit parameter link idkisah=idkisah.<br />
<br />
Jika menginginkan link dibuka pada jendela baru, klik Advanced, pilih _blank.<br />
<br />
Pengaturan lainnya juga bisa dibuat di properti link ini, misal "alt tag" dll.<br />
<br />
Proses yang sama dapat kita lakukan untuk link lainnya. Dari tabel di atas ada tiga link. Link Penulis dapat ditujukan ke profil penulis, link profilteman dapat ditujukan ke profil teman (tentunya halaman yang dituju telah disiapkan terlebih dulu). Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-33337306837825431352012-12-30T17:40:00.000+07:002013-01-10T08:11:28.224+07:00Membuat Title Page Dinamis dari Database MySQLUntuk mencontohkan membuat "Title Page" dari Database MySQL dengan CodeCharge Studio ini, kita memerlukan halaman khusus yang menampilkan hanya satu entri saja. Sebelumnya kita telah membuat tabel daftar kisah di homepage, (<a href="http://id-codecharge.blogspot.com/2012/12/membuat-filter-daftar-kisah-di-homepage.html" target="_blank">lihat Menggunakan Grid Builder untuk Tabel di Homepage</a>). Di tabel tersebut kita telah memiliki Judul Kisah berbentuk Text Link yang mengarahkan ke halaman kisah detil, yakni halaman yang memuat detil kisah.<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<br />
<br />
Buat halaman baru dengan nama detil_kisah.<br />
Pada halaman ini, menggunakan Grid Builder buatlah tabel yang hanya memuat satu entri saja (gunakan Frid Builder). Kawan bisa berkreasi membentuk layout detil kisah ini. Sebagai contoh saja saya menampilkannya sbb:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrqz9Ug6XkJno4fXak7BQUsjNBcy4SigxZo4FEgMEej_FlJXcTvgcBmkdYMu_Tx3exBP1uV_3dSpdrxIxmbU25l4Qx6MMH7d2r68cI5SlKmDHEsB6_hJucUK5HpCwP8hDtzei-sP1utHY/s1600/kisah2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Tabel menggunakan Grid Builder CCS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrqz9Ug6XkJno4fXak7BQUsjNBcy4SigxZo4FEgMEej_FlJXcTvgcBmkdYMu_Tx3exBP1uV_3dSpdrxIxmbU25l4Qx6MMH7d2r68cI5SlKmDHEsB6_hJucUK5HpCwP8hDtzei-sP1utHY/s320/kisah2.png" height="144" title="Tabel menggunakan Grid Builder CCS" width="320" /></a></div>
Aturlah properti tanggal.<br />
Pada query builder, gunakan tabel <b>profil as penulis</b>, <b>profil as teman</b> dan <b>tabel kisah</b>.<br />
dengan kondisi WHERE<br />
<i>kisah.idkisah=idkisah </i><br />
<i>kisah.tampil (int) = expression 1, </i><br />
<i>default Null</i><br />
<i>Sort by idkisah (dec)</i><br />
Dengan pengaturan kondisi WHERE seperti di atas maka jika halaman ini di load dengan parameter idkisah=123 maka akan memunculkan hanya kisah dengan idkisah=123. Jika halaman ini di load tanpa parameter maka akan memunculkan kisah terakhir.<br />
<br />
Aturlah properti tekscerita dengan Content=HTML. Seperti pada gambar.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjowok5r4HhlS8jqiRF3NwfphiOKIzkJOMjPc5rFea_ntyEmZQqVNGdE7MR2nMUeiSsH2jXHnu6yrK5VLDUFiETRKs6DnkA3DPKmwTwQauKF2YrulaZN0743xYGSO88t9hdiRFbDe9nCy0/s1600/kisah1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Setting Teks Content sebagai HTML" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjowok5r4HhlS8jqiRF3NwfphiOKIzkJOMjPc5rFea_ntyEmZQqVNGdE7MR2nMUeiSsH2jXHnu6yrK5VLDUFiETRKs6DnkA3DPKmwTwQauKF2YrulaZN0743xYGSO88t9hdiRFbDe9nCy0/s320/kisah1.png" height="183" title="Setting Teks Content sebagai HTML" width="320" /></a></div>
<br />
Nah. setelah tabel selesai, kita tentunya ingin agar halaman ini memiliki judul (title page) yang sama dengan judul entri.<br />
<br />
<h3>
Cara membuat title page sesuai judul entri</h3>
Logikanya, kita harus membuat teks dari database diantara tag <title> dan </title) pada head halaman . Untuk ini kita tidak dapat mengerjakannya di mode Design. Kita HARUS menggunakan <b>mode HTML</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQAlbhi690l7opcVqDyXad5i1dauFtPpGNdFztOidIPJFRFEKbhh9v__dGAYWJuj2cHuKi6CQxtYX69Y7CQBvm6SIWYH-lqbzRogu9pay7RXLg0PFgkVkGb5ClebWYgMj4zLMrmG9QqM/s1600/title1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="title tag" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQAlbhi690l7opcVqDyXad5i1dauFtPpGNdFztOidIPJFRFEKbhh9v__dGAYWJuj2cHuKi6CQxtYX69Y7CQBvm6SIWYH-lqbzRogu9pay7RXLg0PFgkVkGb5ClebWYgMj4zLMrmG9QqM/s320/title1.png" height="76" title="title tag" width="320" /></a></div>
<br />
Lihat gambar. kita akan menempatkan judul kisah diantara <title> dan </title>.<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn3OzwBn1NYADdtS6OVcrMjCgDU_sltvjKawCqtMiqX35SAiwZequ3e3qwB9FdxJOmLExtry6ombN6lJoXCMyjrgJprcvy6-uVk2bf_HRTelBk0cR3t9s2wwKTtgf2VP1EVidsutHBFxk/s1600/title2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn3OzwBn1NYADdtS6OVcrMjCgDU_sltvjKawCqtMiqX35SAiwZequ3e3qwB9FdxJOmLExtry6ombN6lJoXCMyjrgJprcvy6-uVk2bf_HRTelBk0cR3t9s2wwKTtgf2VP1EVidsutHBFxk/s1600/title2.png" /></a></div>
Letakkan kursor diantara <title> dan </title><br />
Kita menggunakan Toolbox, Forms, Grid.<br />
<br />
Pada Grid Form, atur seperti gbr.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtL5fAgILQsEErD-KZ7BV_BtJwP_rFweW6EmMhrLRM85JshVz9aZgsn6r3wxZrvmHu652HE56HTIpC_yJjrt4SGKJkYsscHQ9vUXj0eCbVunO4VgikGfqyOAF_RzONHFQhNNauy5Ef-K8/s1600/title3.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtL5fAgILQsEErD-KZ7BV_BtJwP_rFweW6EmMhrLRM85JshVz9aZgsn6r3wxZrvmHu652HE56HTIpC_yJjrt4SGKJkYsscHQ9vUXj0eCbVunO4VgikGfqyOAF_RzONHFQhNNauy5Ef-K8/s320/title3.png" height="256" width="320" /></a></div>
<br />
Setelah Add Grid Form di atur dan klik OK, maka kita akan meletakkan teks judul dari database diantara<br />
<div style="color: blue;">
<title></div>
<span style="font-size: x-small;"><span style="color: #38761d;"><!-- BEGIN Grid title -->{</span>judulkisah}<span style="color: #38761d;"><!-- END Grid title --> </span></span><br />
<div style="color: blue;">
</title></div>
<br />
tabel yang digunakan hanya 1 saja yaitu tabel kisah. Pengaturan mirip dengan tabel di atas<br />
dengan kondisi WHERE<br />
<i>idkisah=idkisah </i><br />
<i>tampil (int) = expression 1, </i><br />
<i>default Null</i><br />
<i>Sort by idkisah (dec)</i><br />
<br />
Selesai. Berikutnya kita akan atur tekslink judul kisah di index ke halaman detil kisah ini.<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-43723126005982541812012-12-23T12:13:00.001+07:002013-01-10T08:14:34.537+07:00Menggunakan Grid Builder untuk Tabel di HomepageSaat ini ccs project kita sudah memiliki halaman-halaman seperti terlihat pada gambar.<br />
<div class="separator" style="clear: none; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3bWqMYFMtoCJWrgA7hdBpT_cq88jAt5oQ2nzJSqRhzh3fAMOkwLzfwB2tmlhMGWkd4v289uyqL-3cRfkTvrvNeE5dGNm5wiOKsABT0U5tXXAZsTm9ES7SdSOuyuWo4kycag-CxJrkeQ/s1600/project1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Project Explorer CodeCharge Studio" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3bWqMYFMtoCJWrgA7hdBpT_cq88jAt5oQ2nzJSqRhzh3fAMOkwLzfwB2tmlhMGWkd4v289uyqL-3cRfkTvrvNeE5dGNm5wiOKsABT0U5tXXAZsTm9ES7SdSOuyuWo4kycag-CxJrkeQ/s400/project1.png" height="400" title="Project Explorer CodeCharge Studio" width="110" /></a></div>
Halaman pendukung lainnya, seperti common.php, class dan lain-lain akan tercipta otomatis oleh software CodeCharge Studio. Kita tidak perlu bersusah payah membuatnya.<br />
Hanya nanti jika kita akan mengupload pada server hosting, file common.php perlu sedikit diedit untuk penyesuaian nama database, user dan passwordnya.<br />
<br />
<b>Kembali ke proyek web contoh kita.</b><br />
Halaman homepage/index baru memiliki form login saja. Jadi kita akan menempatkan daftar kisah terbaru di bawah form login dan sebuah kisah teranyar disampingnya.<br />
<br />
<h4>
Membuat Tabel Kisah di halaman depan</h4>
Seperti biasa kita akan menggunakan Grid Builder. Pada build query, tambahkan tabel kisah, tabel profil dan tabel profil as penulis.<br />
atur relasi tabel-tabel tersebut seperti gambar di bawah ini<br />
sortby idkisah Desc<br />
<b>Where tampil = 1 (Ini akan memfilter data yang muncul hanya yang sudah di oke kan oleh penulisnya).</b><br />
Type Expression<br />
<br />
<a name='more'></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizwbFHAueLdTFTQWyS_5isE1E2HN60uCSzDT33RC3CbGoKr6UCnN0gvHf1IG_Ab_GziXDvVl70bEuzLGrLr44Ls5DqurDkjKYQnyKDaBSTPasD2ZUep29VpPPFcTZOYvtuTIVGCUIs-NE/s1600/tabelkisah1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Build Query CodeCharge Studio" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizwbFHAueLdTFTQWyS_5isE1E2HN60uCSzDT33RC3CbGoKr6UCnN0gvHf1IG_Ab_GziXDvVl70bEuzLGrLr44Ls5DqurDkjKYQnyKDaBSTPasD2ZUep29VpPPFcTZOYvtuTIVGCUIs-NE/s640/tabelkisah1.png" height="388" title="Build Query CodeCharge Studio" width="640" /></a></div>
<br />
Proses selanjutanya dari grid builder ini seperti biasa, memilih data, yang akan dimuat (pilih tanggal, nama penulis, nama teman dan judul kisah)<br />
Rasanya tidak memerlukan form search untuk tabel ini.<br />
Tidak menggunakan navigasi,<br />
style none.<br />
<br /><div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<b>Atur layout tabel seperti di gambar</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVpHePF2C-mlWo8k9Siza2l8-VR0G9qxnMbWwM_EQwEeCPk5vSqvDZuSuT82q0GH_72xrTmFz7Q1U2YVcr4clvRZgSogkBBz2ziwNfdyw3CVA-3O4q2nLpQji55Q_LCfQvLvmift2wQc/s1600/tabelkisah2.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Grid Layout CodeCharge Studio" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVpHePF2C-mlWo8k9Siza2l8-VR0G9qxnMbWwM_EQwEeCPk5vSqvDZuSuT82q0GH_72xrTmFz7Q1U2YVcr4clvRZgSogkBBz2ziwNfdyw3CVA-3O4q2nLpQji55Q_LCfQvLvmift2wQc/s1600/tabelkisah2.png" title="Grid Layout CodeCharge Studio" /></a></div>
Ganti label <b>profil_nama</b>, <b>penulis_nama</b> dan <b>judulkisah</b> menjadi <b>Link</b>. Maksudnya adalah:<br />
Link label profil nama dan penulis akan mengarah ke profil member.<br />
Link judulkisah akan memperlihatkan kisah tersebut secara lengkap.<br />
<br />
Sementara ini, halaman profil member yang dapat dibaca oleh umum belum dibuat, jadi properti link di tabel ini belum bisa di atur. Tinggalkan dulu... nanti kita beresin.<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-46700061288966580482012-12-22T18:02:00.001+07:002013-01-10T08:17:50.480+07:00HTML Text Area dengan TinyMCE<b>Sebelum mulai, lihat gambar ini</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoECUQPMiRZo2vVVkPLiS27hsbY7Asn52cmuK_mkY5f46sfZwYos5czcKGiM1VT3Wru3OAfJeekY6QJx1TcFiUfbp_VGzSaNpWvmoYyLB_CVT8ySzrgn6o4FV-Z8isuq-1lGtW_JtPdJY/s1600/textarea1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="text area dengan tinyMCE" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoECUQPMiRZo2vVVkPLiS27hsbY7Asn52cmuK_mkY5f46sfZwYos5czcKGiM1VT3Wru3OAfJeekY6QJx1TcFiUfbp_VGzSaNpWvmoYyLB_CVT8ySzrgn6o4FV-Z8isuq-1lGtW_JtPdJY/s400/textarea1.png" height="265" title="text area dengan tinyMCE" width="400" /></a></div>
<br />
Saat membuat form menggunakan codecharge studio, default isi dari textarea hanya teks. Kita tidak dapat mengisikan kode html.<br />
<br />
Contoh berikut ini kita akan membuat textarea dalam form menjadi isian html. Pastinya akan lebih baik.<br />
<br />
Codecharge studio versi 4 yang saya gunakan memiliki tool untuk membuat form seperti ini. Hanya saja editor yang digunakan adalah FCKeditor. CCS akan otomatis menambahkan script di halaman yang kita akan pasang textarea. Tetapi, kita tetap harus mendownload fckeditor dari webnya dan mengupload sendiri.<br />
<br />
<a name='more'></a><br />
<br />
Berdasar pengalaman, saya lebih suka menggunakan tinyMCE (jangan tanya mengapa).<br />
<br />
<h3>
Membuat TextArea dengan tinyMCE</h3>
Menggunakan halaman addkisah yang telah ada form yang ada textareanya, ikuti langkah berikut.<br />
<br />
Buka halaman menggunakan codecharge studio mode html.<br />
Tambahkan di atas tag </HEAD><br />
<br />
<span style="font-size: x-small;"><span style="color: #38761d;"><!-- TinyMCE --></span><br /><script type="text/javascript" src="tiny_mce/tiny_mce.js"></script><br /><script type="text/javascript"><br /> tinyMCE.init({<br /> mode : "textareas",<br /> theme : "advanced",<br /> skin : "o2k7",<br /> plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosave",<br />
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",<br /> theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",<br /> theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",<br /> theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",<br /> theme_advanced_toolbar_location : "top",<br /> theme_advanced_toolbar_align : "left",<br /> theme_advanced_statusbar_location : "bottom",<br /> theme_advanced_resizing : true,<br /> content_css : "css/word.css",<br /> template_external_list_url : "lists/template_list.js",<br /> external_link_list_url : "lists/link_list.js",<br /> external_image_list_url : "lists/image_list.js",<br /> media_external_list_url : "lists/media_list.js",<br /> template_replace_values : {<br /><br /> }<br /> });<br /><span style="color: blue;"></script></span><br /><span style="color: #274e13;"><!-- /TinyMCE --></span></span><br />
<br />
dan untuk textarea sbb<br />
<br /><div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
<pre id="line317" style="background-color: #ffe599;"><<span class="start-tag">textarea</span><span class="attribute-name"> style</span>=<span class="attribute-value">"WIDTH: 500px; HEIGHT: 200px" </span></pre>
<pre id="line317" style="background-color: #ffe599;"><span class="attribute-value"> </span><span class="attribute-name">id</span>=<span class="attribute-value">"elm1" </span><span class="attribute-name">rows</span>=<span class="attribute-value">"11" </span><span class="attribute-name">cols</span>=<span class="attribute-value">"50" </span><span class="attribute-name">name</span>=<span class="attribute-value">"elm1"</span>></pre>
<pre id="line317" style="background-color: #ffe599;"></<span class="end-tag">textarea</span>></pre>
<br />
<div style="color: red;">
<b>Jangan lupa untuk mendownload <a href="http://www.tinymce.com/download/download.php" target="_blank">tinyMCE</a> dan menyimpannya di server.</b></div>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-71597033082248119152012-12-22T14:19:00.000+07:002013-01-10T08:20:20.473+07:00Cara Sederhana Mengganti Teks Dengan GambarUntuk contoh mengganti teks dengan gambar, kita masih menggunakan tabel yang telah dibuat, yakni tabel "Kisah". Dalam tabel ini, kolom Tampil menampilkan angka 1 untuk Kisah yang ditayangkan dan angka 0 untuk kisah yang belum ditayangkan. Kita menginginkan angka 1 dan 0 di ganti dengan :<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHvfkCm6hkjDvccWU5fe6Wsg3optHDiOal51WRbD7SS9bKAZ4K9xQ7MowmEy8kdRFFM9yP57Ls8cK90W97yPj-wK6gkCm9xFSYFG2u_JX0uiMNwrRCBDkilNODLObUY4E20EhhKvrdaI/s1600/1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVHvfkCm6hkjDvccWU5fe6Wsg3optHDiOal51WRbD7SS9bKAZ4K9xQ7MowmEy8kdRFFM9yP57Ls8cK90W97yPj-wK6gkCm9xFSYFG2u_JX0uiMNwrRCBDkilNODLObUY4E20EhhKvrdaI/s1600/1.png" /></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPrsRvTjByuuYX08wjcfn1FP_2YIK4BjH9eVKLMaTxCYAo3bWIB2K040w8IyFCvxAJL9az-HJ_ZK-N9TiwO4WWoWxgdnSf9Y5adOHplE2acDky81sk4PbUSvyfslgjuN1nTRaAsJbUM2c/s1600/0.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPrsRvTjByuuYX08wjcfn1FP_2YIK4BjH9eVKLMaTxCYAo3bWIB2K040w8IyFCvxAJL9az-HJ_ZK-N9TiwO4WWoWxgdnSf9Y5adOHplE2acDky81sk4PbUSvyfslgjuN1nTRaAsJbUM2c/s1600/0.png" /></a></div>
<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHizsfR671PycMGj93kEUhRh0d2e2UrGU739IB10jNL1kQE7gRn-ldHew7-iD_ZQelViFGrCe94PRj9CKEsdpHDXnpnGfa_iCwbqvZ3cqjuuQdwI62Bj4jh-33eM73QoeQCXslog4zQY/s1600/teksimage1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="text to image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHizsfR671PycMGj93kEUhRh0d2e2UrGU739IB10jNL1kQE7gRn-ldHew7-iD_ZQelViFGrCe94PRj9CKEsdpHDXnpnGfa_iCwbqvZ3cqjuuQdwI62Bj4jh-33eM73QoeQCXslog4zQY/s320/teksimage1.png" height="184" title="text to image" width="320" /></a></div>
<br />
<br />
Untuk itu, ada beberapa cara yang bisa dilakukan dalam codecharge studio. Saya hanya menggunakan cara sederhana saja, yakni menambahkan beberapa tag img dalam mode html.<br />
Dalam mode html, carilah tag ini:<br />
<br />
<br /><div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<blockquote class="tr_bq">
<span style="color: blue;"><td </span><span style="color: #f1c232;">style</span><span style="color: magenta;"><span style="color: #f1c232;">=</span>"TEXT-ALIGN: right"</span><span style="color: blue;">></span>{tampil}<span style="color: blue;"></td> </span></blockquote>
<br />
<br />
tambahkan tag img sehingga menjadi<br />
<br />
<br />
<blockquote class="tr_bq">
<span style="color: blue;"><td</span> <span style="color: #f1c232;">style=</span><span style="color: magenta;">"TEXT-ALIGN: right"</span><span style="color: blue;">><img </span><span style="color: #f1c232;">src=</span><span style="color: magenta;">"img/{tampil}.png"</span> <span style="color: #f1c232;">alt=</span><span style="color: magenta;">"tampil face"</span> <span style="color: #f1c232;">height=</span><span style="color: magenta;">"32"</span> <span style="color: #f1c232;">width=</span><span style="color: magenta;">"32"</span><span style="color: blue;">></td> </span></blockquote>
Nilai dari [tampil] jika dijalankan hanya akan menampilkan 1 atau 0. jadi buatlah image yang menandakan tampil dengan nama file 1.png dan image yang menandakan tidak tampil dengan nama 0.png.<br />
Simpanlah kedua file image tersebut dalam folder /img/<br />
Setelah selesai, dapat kita coba di localhost. Akan menghasilkan seperti ini.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKNjE9ynFXsETd9v8b3VI2XJgWRl04WrVQbvaQh5qEn1k6we75W-L9-rd3v_Le2tesQRiQen9LUxs4Hpec7-HaiEDie2ITbMu9M9zYIMYDLOrBkftXu0jk27fdF3ytV0FHx5gzl6saxsk/s1600/teksimage2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Text jadi image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKNjE9ynFXsETd9v8b3VI2XJgWRl04WrVQbvaQh5qEn1k6we75W-L9-rd3v_Le2tesQRiQen9LUxs4Hpec7-HaiEDie2ITbMu9M9zYIMYDLOrBkftXu0jk27fdF3ytV0FHx5gzl6saxsk/s320/teksimage2.png" height="186" title="Text jadi image" width="320" /></a></div>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-84595305060865376812012-12-22T12:09:00.001+07:002013-01-10T08:22:15.801+07:00Membuat Link untuk Edit.Masih menggunakan table "addkisah" yang telah dibuat, kita akan mengganti text judul yang sekarang berupa Label Text menjadi Link. <br />
Link ini akan mengarahkan data ke Form Edit disebelahnya. Dengan demikian member dapat mengupdate tulisannya, dapat mengaktifkan/ menon aktif dan bahkan dapat menghapus.<br />
Lihat Gambar ini.<br />
<a name='more'></a><br />
Klik gambar untuk memperjelas tulisan.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYSoM6x8OqZF1BPRs1VdfnTJjL7S-A2GIPlGijFbREDkHs-ZQWiwublZUnYPgM4NB84BdJfa92iU_SXiWZoXt_bxBmHFpPyOn2gLv-j2Ri2MpBebPc2F2KRGcISOED2fmxYiLBb9YO4k/s1600/link1.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYSoM6x8OqZF1BPRs1VdfnTJjL7S-A2GIPlGijFbREDkHs-ZQWiwublZUnYPgM4NB84BdJfa92iU_SXiWZoXt_bxBmHFpPyOn2gLv-j2Ri2MpBebPc2F2KRGcISOED2fmxYiLBb9YO4k/s320/link1.png" height="197" width="320" /></a></div>
Dengan klik kanan pada judul akan memunculkan menu Change to, pilih Link.<br />
<br />
Setelah dirubah menjadi Link, sekarang kita akan mengatur properti dari komponen link judulkisah ini agar mengarahkan data ke form record/edit.<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-jcOmn7o2YyyaTgR-iqSqYi7mE7epV5Gl5V1DXVoCkYnhd6jmMN0RXHPtI62rDs2aBuRIoXbTKdfaVqMf0wjLFZuZKNywL7yjKc7lCDeIKX_ABIf6ejFvhzYy59AXj3bgWFQTnjdsZRA/s1600/link2.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Setting Link Properties" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-jcOmn7o2YyyaTgR-iqSqYi7mE7epV5Gl5V1DXVoCkYnhd6jmMN0RXHPtI62rDs2aBuRIoXbTKdfaVqMf0wjLFZuZKNywL7yjKc7lCDeIKX_ABIf6ejFvhzYy59AXj3bgWFQTnjdsZRA/s320/link2.png" height="200" title="Setting Link Properties" width="320" /></a><br />
<br />
Pada properti, tentukan bahwa link akan diarahkan ke halaman (Href type: page,<br />
Href source addkisah.ccp<br />
Lihat gambar berikut.<br />
<br />
Langkah terakhir adalah mengatur parameter link agar mengarah ke data yang tepat. Parameter harus unik, biasanya digunakan ID yang autoincrement. Dalam tabel data kisah ini, data uniknya adalah "idkisah".<br />
<br />
Atur seperti pada gambar berikut<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIqWA4gYNp46nVAP_p48nGjhKXYQoV1I4ZyZbG1nIf6AACsqbmdduSsvtI8dj5xo5WKkJlf24_Ao_sWF4-obMc_0bIfDD1WK5yj_9my5E2mZESrxTvRis740L6BWmA-dQGromTltEm_gk/s1600/link3.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIqWA4gYNp46nVAP_p48nGjhKXYQoV1I4ZyZbG1nIf6AACsqbmdduSsvtI8dj5xo5WKkJlf24_Ao_sWF4-obMc_0bIfDD1WK5yj_9my5E2mZESrxTvRis740L6BWmA-dQGromTltEm_gk/s320/link3.png" height="268" width="320" /></a></div>
<br />
<br />
Pada tab Parameter, klik +.<br />
Source type: DataSource Column<br />
Parameter Source: idkisah<br />
Parameter Name : idkisah<br />
<br />
<br />
<br />
<br />
Selesai.<br />
Tampilannya pada localhost<br /><div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzOQ9tsQJT7Po7iM6RaRwfQfb9ZQ8A2i0UQeddAlCy7Rer8S3E-BmX6XoitbHiOZplI926Hb7h2btFxubHMVELv1qfZJvnr6uwuIUlr7eJjvT8lMb3-Jq8mg4XMb1LukvIuTbCa_DLG4o/s1600/link4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzOQ9tsQJT7Po7iM6RaRwfQfb9ZQ8A2i0UQeddAlCy7Rer8S3E-BmX6XoitbHiOZplI926Hb7h2btFxubHMVELv1qfZJvnr6uwuIUlr7eJjvT8lMb3-Jq8mg4XMb1LukvIuTbCa_DLG4o/s640/link4.png" height="250" width="640" /></a></div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-13658734187718848452012-12-21T21:03:00.000+07:002013-01-10T08:23:19.311+07:00Membuat Daftar Tulisan yang Dimuat Oleh Member Login SajaAgak ribet juga ngasih judulnya. Maksud saya adalah membuat tabel yang berisi daftar tulisan yang hanya dibuat oleh member yang sedang login. Kegunaannya adalah agar member yang login dapat melihat, memperbaiki ataupun menghapus tulisan-tulisan yang pernah dibuatnya.<br />
Sebenarnya cara ini juga berlaku di hampir semua web yang menerapkan sistem keanggotaan. Bayangkan jika kita sebagai member facebook tidak dapat melihat post apa saja yang pernah kita buat... cilaka deh.<br />
<br />
<a name='more'></a><br /><br />
<div class="separator" style="clear: none; float: left;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div>
Kembali ke web Daftar Kisah Teman yang jadi contoh kita untuk mempelajari CodeCharge Studio ini. Progres terakhir adalah kita sudah membuat form untuk memuat kisah teman dalam halaman "<a href="http://id-codecharge.blogspot.com/2012/12/form-untuk-memuat-textarea.html" target="_blank">addkisah</a>". <br />
<br />
Form tersebut jika diisi oleh member tentunya menghasilkan tulisan. Nah kita perlu membuat tabel daftar kisah teman yang nantinya akan kita beri Link ke Form untuk di edit ataupun di hapus.<br />
<br />
Halaman yang kita gunakan tetap halaman "addkisah".<br />
Kita akan letakkan tabel ini di samping form. Tabel ini akan memuat Judul, Tanggal dibuat, nama member.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGqpjQad0QINOXpCdqOjPh30_nI9ZNmpZ-3mtbNTsAj77280aJEazS10lNYVoYavwFY0_Ic6zboyS_uOy-LCl315ofxbjOmwTBCU6UOTJH1InF1I_3WwcRAdB4e-Fvo7jAprw9n9WyPI/s1600/addkisah3.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGqpjQad0QINOXpCdqOjPh30_nI9ZNmpZ-3mtbNTsAj77280aJEazS10lNYVoYavwFY0_Ic6zboyS_uOy-LCl315ofxbjOmwTBCU6UOTJH1InF1I_3WwcRAdB4e-Fvo7jAprw9n9WyPI/s400/addkisah3.png" height="256" width="400" /></a></div>
Untuk membuat tabel ini diperlukan dua tabel, tabel profil (untuk data member yang login), tabel kisah (untuk daftar kisah yang dibuat oleh member login), dan tabel profil juga (tabel profil diberi alias teman; untuk data teman yang dikisahkan).<br />
<br />
Gunakan Grid Builder dan atur querynya seperti di gambar. Untuk kondisi WHERE gunakan idteman dengan parameter UserID, Type Session, Default =0. (penjelasan tentang ini ada di artikel <a href="http://id-codecharge.blogspot.com/2012/12/menampilkan-database-dalam-tabel.html" target="_blank">Menampilkan Database Dalam Tabel</a>).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWlCMdbPwUw34agNANLh_3XcHIS2T-O2YjH4m0V8DIjqU2gJ0NUycL5Pw6M8Gl7FN4rKvbhxu2ESAJ5mpmSav5qr092OiMsLs4puxmqLaoNHDT74aSztRtiuTNA_wte5iuwySumD-_g44/s1600/addkisah4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWlCMdbPwUw34agNANLh_3XcHIS2T-O2YjH4m0V8DIjqU2gJ0NUycL5Pw6M8Gl7FN4rKvbhxu2ESAJ5mpmSav5qr092OiMsLs4puxmqLaoNHDT74aSztRtiuTNA_wte5iuwySumD-_g44/s320/addkisah4.png" height="266" width="320" /></a></div>
<br />
Di samping ini adalah gambar proses selanjutnya yakni memilih data apa saja yang akan ditampilkan dalam tabel.<br />
<br />
Setelah proses ini adalah menentukan field search. CodeCharge Studio selalu menawarkan untuk membuat form pencarian dalam setiap pembuatan tabel.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwRTmkKSSRmfoyJm0W1q6yg4V3vM_TGYYkfuZ7RcqHhEvt0YTzqGDXMYYwcVmDVxjuFnL01_9T91nu6cAK7Lo2KTGizyWY4LkbEdkD1n1imvNxdsGLvYrESgGnnTnnUaKctq7reZvmmxQ/s1600/addkisah5.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="membuat form pencarian" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwRTmkKSSRmfoyJm0W1q6yg4V3vM_TGYYkfuZ7RcqHhEvt0YTzqGDXMYYwcVmDVxjuFnL01_9T91nu6cAK7Lo2KTGizyWY4LkbEdkD1n1imvNxdsGLvYrESgGnnTnnUaKctq7reZvmmxQ/s320/addkisah5.png" height="266" title="membuat form pencarian" width="320" /></a></div>
<br />
Sepertinya kita memerlukan form pencarian, kita tentukan kita menggunakan field judul kisah dan nama teman.<br />
<br />
Sistem pencarian default yang digunakan oleh codecharge adalah, jika fieldnya berupa teks maka sistemnya adalah like%..% artinya mengandung kata....<br />
Sedangkan jika field yang dicari adalah angka, maka default pencarian adalah samadengan (=).<br />
<br />
Kondisi tersebut dapat kita ganti sesuai dengan keinginan kita dalam visual query builder. Silahkan bereksperimen di kondisi WHERE dalam query yang kita buat.<br />
<br />
Proses selanjutnya adalah menentukan layout, menentukan navigasi, menentukan style. Keseluruhan proses ini hanya menggunakan beberapa klik dan beberapa ketik saja.<br />
<br />
Seperti biasa setelah menyelesaikan sesuatu menggunakan Tool box Builder, kita masih perlu mengatur properti masing-masing komponen. Misal format tanggal, format DBtanggal, tampilan disain, dll.<br />
<br />
Terakhir, harus di tes. Jadinya seperti ini.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0O4UphbhraYYlwBtYOZ0GeBFbD8SPiYpj56nXkcimjsBd__MazN1pvivm11aVQNxjvp2qaf_sbBaPqVSiYWvchFYUO3_datHwqDlCDXw6cf0D_P-vwZStcCo6FQP-1IeFkjUOZXbFv0/s1600/addkisah6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="tabel grid dan record dengan codecharge" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu0O4UphbhraYYlwBtYOZ0GeBFbD8SPiYpj56nXkcimjsBd__MazN1pvivm11aVQNxjvp2qaf_sbBaPqVSiYWvchFYUO3_datHwqDlCDXw6cf0D_P-vwZStcCo6FQP-1IeFkjUOZXbFv0/s640/addkisah6.png" height="243" title="tabel grid dan record dengan codecharge" width="640" /></a></div>
<br />
<br />
Berikutnya kita akan membuat Link Edit dan merubah angka 1/0 dalam field tampil/tidak tampil menjadi image sehingga tabel data kita menjadi lebih indah.<br />
<br />
<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-3112901150500350042.post-28278702842455697072012-12-21T13:47:00.000+07:002013-01-10T08:24:51.332+07:00Menggabung Dua Field Dalam Listbox<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUJzuAb2nlp_a9fkp4JDkv9ks2fsTn_jbM_h-sOuW56zNNP68oJvFDu1FOoUcL8OLP4VZD-h1Nj6cdNsSt0Zny0qpAMUMcC2T4DFbDoZ9eo44Z1XZvfl8Ldvuds9I0EPvOjp9KhY7Q9Q/s1600/listbox3.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="listbox " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUJzuAb2nlp_a9fkp4JDkv9ks2fsTn_jbM_h-sOuW56zNNP68oJvFDu1FOoUcL8OLP4VZD-h1Nj6cdNsSt0Zny0qpAMUMcC2T4DFbDoZ9eo44Z1XZvfl8Ldvuds9I0EPvOjp9KhY7Q9Q/s320/listbox3.png" height="211" title="listbox " width="320" /></a></div>
Tulisan ini adalah sambungan dari <a href="http://id-codecharge.blogspot.com/2012/12/form-untuk-memuat-textarea.html" target="_blank">artikel sebelum ini</a> yang membahas membuat form untuk memuat kisah teman. Penekanan khusus harus dilakukan untuk mengatur Listbox idteman (teman yang diceritakan). <br />
<br />
Gambar di samping memperlihatkan form yang telah kita siapkan sebelumnya. <br />
Kita akan membuat daftar isian listbox tersebut dengan gabungan data idteman dan nama.<br />
seperti (ID:no) Nama<br />
<a name='more'></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbVVo80w0oli9_9ReUkKG-BukVwc5mvLkycSBW033Y1X8Xa96nphxApPLuDGr_e5C0vmQIvV6IR2XirIv2xn2E4DBM4gMshaZuBpdzeXsVPrcwdJbGnwJegy7XwO08cOyy5jiRLp-YBQ/s1600/listbox5.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbVVo80w0oli9_9ReUkKG-BukVwc5mvLkycSBW033Y1X8Xa96nphxApPLuDGr_e5C0vmQIvV6IR2XirIv2xn2E4DBM4gMshaZuBpdzeXsVPrcwdJbGnwJegy7XwO08cOyy5jiRLp-YBQ/s320/listbox5.png" height="298" width="320" /></a></div>
<br />
Klik pada listbox untuk melihat propertinya.<br />
Atur seperti gambar di samping.<br />
Pada Data Source: profil, masuk ke visual query builder<br />
Lihat gambar di bawah.<br />
Tambah item select dengan<br />
<blockquote class="tr_bq">
concat("ID:",idteman," Nama: ",nama)</blockquote>
Sort Asc by nama.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg60rl17QF7FBcIoelUzsarbwz6HyJCJN4Rm4f1fDVgTR-ec4kV7KpE7qI2Viccw4cHWdw_ZU49yWucFgOKLdh_vG-20_K-dt-TmgQNgUy-FNfwvNDf5Pp6cueN5z73PgIwacRQkoY2Oo4/s1600/listbox4.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="concat pada lisbox" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg60rl17QF7FBcIoelUzsarbwz6HyJCJN4Rm4f1fDVgTR-ec4kV7KpE7qI2Viccw4cHWdw_ZU49yWucFgOKLdh_vG-20_K-dt-TmgQNgUy-FNfwvNDf5Pp6cueN5z73PgIwacRQkoY2Oo4/s320/listbox4.png" height="257" title="concat pada lisbox" width="320" /></a></div>
<br />
<br />
Tampilan jadinya sbb.<br /><div class="separator" style="clear: none; float: right;">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0670400618005693";
/* belajarcodecharge */
google_ad_slot = "0303953346";
google_ad_width = 336;
google_ad_height = 280;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br />
<div center="center" class="separator" text-align:="text-align:">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJqfzDihNQsrBw5wyK86ryGTklZqTj1nTEyCK8O1HO-_sjKQ_Uu5jZbRryTMnpbozZSnJTFKHXkQpN3k7bJfNi-MxzWcx5T1C-LAnQoSgobAOyj-tIG0XytkX2oTp7eynfhEFMIhe-b1k/s1600/listbox6.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJqfzDihNQsrBw5wyK86ryGTklZqTj1nTEyCK8O1HO-_sjKQ_Uu5jZbRryTMnpbozZSnJTFKHXkQpN3k7bJfNi-MxzWcx5T1C-LAnQoSgobAOyj-tIG0XytkX2oTp7eynfhEFMIhe-b1k/s200/listbox6.png" height="124" width="200" /></a></div>
<br />Unknownnoreply@blogger.com5