Archive for June, 2009

Jun200927

danni

0

Meng-UNDO tab yang tertutup di browser

OperaAda hal menarik dengan Opera 10 : ketika sedang membaca satu artikel gag sengaja si tab tersebut ketutup, reflek – kalo pemakai windows – tentunya menekan tombol CTRL+Z untuk membatalkan, bah,,,, taunya si tab balik lagi,, cool. Setelah diusut ini ternyata udah fitur si Opera :) … BTW, browser lain yang ada fitur ini adalah FireFox hanya untuk shortcutnya berbeda, yaitu CTRL+SHIFT+T atau CTRL+F12.

Jun200926

danni

0

Konversi dataset ke JSON

Setelah muter2 ketemu juga akhirnya. Biar gampangnya, serialisasi ke JSON menggunakan library JSON.NET, di websitenya ada beberapa versi tergantung versi .net framework yang digunakan. BTW, ini kodenya :

   1: Imports Newtonsoft.Json

   2: Private Function GetCustomer() As String

   3:     Dim retVal As String = ""

   4:     Dim ds As DataSet = DAL.Customer.GetCustomers

   5:

   6:     If ds IsNot Nothing AndAlso ds.Tables(0).Rows.Count > 0 Then

   7:         Dim custList As New List(Of Hashtable)()

   8:         For i As Integer = 0 To ds.Tables(0).Rows.Count - 1

   9:             Dim ht As New Hashtable()

  10:             Dim row As DataRow = TryCast(ds.Tables(0).Rows(i), DataRow)

  11:             ht("IDCustomer") = Convert.ToString(row("IDCustomer"))

  12:             ht("CustomerName") = Convert.ToString(row("CustomerName"))

  13:             custList.Add(ht)

  14:         Next

  15:         retVal = JavaScriptConvert.SerializeObject(custList)

  16:     End If

  17:

  18:     Return retVal

  19: End Function

Output yang dihasilkan adalah sebagai berikut (setelah dirapikan):

   1: [

   2: {"IDCustomer":"1","CustomerName":"Unyil"},

   3: {"IDCustomer":"2","CustomerName":"Cuplis"},

   4: {"IDCustomer":"3","CustomerName":"Ableh"}

   5: ]

Jun200919

danni

0

Running ASP.NET MVC website on Windows XP/IIS 5.1

If your development environment is still using Windows XP Pro and need to run ASP.NET MVC web application, probably you are running the app from the Visual Studio IDE. Why not using IIS ? Well, technically it is possible to run ASP.NET MVC web application on IIS 5.1 but requires too many action as described in this post.

If those steps is too cumbersome for you then you can consider using Ultidev’s Cassini web server. It’s a small download and you can get a powerful ASP.NET (MVC) compatible web server in just 2 easy steps:

1. Open cassini web server and setup your app.

Go to “Start | Programs | Ultidev | Cassini Web Server | Cassini Web Server Explorer”. Click the “Register Application” button and insert the detail info of your app and click the “save” button.

Setting Cassini

2. Click on the application name and you’re ready to go.

Running our web app

Jun200918

danni

17

Prestashop – Menampilkan slideshow di halaman depan

presta1

Prestashop seperti yang mungkin sudah Anda kenal, adalah salah satu aplikasi web, berupa Content Management System (CMS) khusus untuk keperluan e-commerce. Dibuat menggunakan PHP dan memanfaatkan SMARTY sebagai template engine-nya. Sekarang kita akan mencoba untuk menambahkan slideshow dihalaman depan satu website yang berguna misalnya untuk menampilkan serangkaian produk terbaru.

S3Slider

Untuk keperluan slideshow ada beberapa alternatif yang dapat digunakan antara lain menggunakan Flash atau Javascript. Untuk sederhananya kita gunakan javascript untuk keperluan slideshow diatas yaitu S3Slider.

Menggunakan script ini sangat mudah, cukup dengan menyisipkan kode javascript, CSS dan HTML (berupa list untuk .menampilkan image). Lebih detailnya Anda dapat melihat contohnya di website S3Slider atau download s3SliderFull.zip yang berisi script berikut contoh penggunaannya.

Integrasi S3Slider dengan Prestashop

Halaman depan yang memuat tampilan yang akan diganti sebetulnya adalah berupa modul bernama “Editorial”. Modul ini dapat Anda temukan di folder modules\Editorial. Backup dahulu folder tersebut sebelum melakukan perubahan berikut.

Ada beberapa file disana, antara lain: editorial.xml (sumber data), editorial.tpl (template layout), editorial.php (bertanggung jawab mengisi data dengan menggunakan layout diatas dan menampilkannya di halaman depan). Karena yang akan kita ubah adalah layoutnya, maka perubahan cukup dilakukan pada file editorial.tpl. Buka file tersebut dan paste kode dibawah ini:

   1: <!-- Module Editorial -->

   2: <div id="editorial_block_center" class="editorial_block">

   3: <script type="text/javascript" src="{$this_path}s3Slider.js"></script>

   4: <script type="text/javascript">

   5: {literal}

   6:  $(document).ready(function() {$('#slider').s3Slider({timeOut: 3000});});

   7: {/literal}

   8: </script>

   9: <style type="text/css">@import url({$this_path}editorial.css);</style>

  10: <div id="slider">

  11:     <ul id="sliderContent">

  12:         <li class="sliderImage">

  13:             <a href=""><img src="{$this_path}1.jpg" alt="1" /></a>

  14:             <span class="top"><strong>Title text 1</strong><br />Content text...</span>

  15:         </li>

  16:         <li class="sliderImage">

  17:             <a href=""><img src="{$this_path}2.jpg" alt="2" /></a>

  18:             <span class="top"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>

  19:         </li>

  20:         <li class="sliderImage">

  21:             <img src="{$this_path}3.jpg" alt="3" />

  22:             <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>

  23:         </li>

  24:         <li class="sliderImage">

  25:             <img src="{$this_path}4.jpg" alt="4" />

  26:             <span class="bottom"><strong>Title text 2</strong><br />Content text...</span>

  27:         </li>

  28:         <li class="sliderImage">

  29:             <img src="{$this_path}5.jpg" alt="5" />

  30:             <span class="top"><strong>Title text 2</strong><br />Content text...</span>

  31:         </li>

  32:         <div class="clear sliderImage"></div>

  33:     </ul>

  34:     <div class="clear"></div>

  35: </div>

  36: {if $xml->body->$logo_subheading}{$xml->body->$logo_subheading|stripslashes}{/if}

  37: {if $xml->body->$title}<h2>{$xml->body->$title|stripslashes}</h2>{/if}

  38: {if $xml->body->$subheading}<h3>{$xml->body->$subheading|stripslashes}</h3>{/if}

  39: {if $xml->body->$paragraph}<div>{$xml->body->$paragraph|stripslashes}</div>{/if}

  40: </div>

  41: <!-- /Module Editorial -->

Selanjutnya copy file s3Slider.js dan file image dari s3SliderFull.zip (ada di folder images\410) ke folder modules\editoral. Buat file editorial.css di folder yang sama dan tambahkan kode dibawah ini (catatan : width dan height dapat diatur menyesuaikan image yang akan Anda gunakan)

   1: #slider {

   2:      width: 410px; /* important to be same as image width */

   3:      height: 300px; /* important to be same as image height */

   4:      position: relative; /* important */

   5:      overflow: hidden; /* important */

   6: }

   7: #sliderContent {

   8:      width: 410px; /* important to be same as image width or wider */

   9:      height:310px; /* add extra 10px for consistent height */

  10: }

  11: .sliderImage {float: left;position: relative;display: none;}

  12: .sliderImage span {

  13:      position: absolute;

  14:     font: 10px/15px Arial, Helvetica, sans-serif;

  15:      padding: 10px 13px;

  16:      width: 384px;

  17:      background-color: #000;

  18:      filter: alpha(opacity=70);

  19:      -moz-opacity: 0.7;

  20:      -khtml-opacity: 0.7;

  21:      opacity: 0.7;

  22:      color: #fff;

  23:      display: none;

  24: }

  25: .sliderImage span strong {font-size: 14px;}

  26: .top {top: 0;left: 0;}

  27: .bottom {bottom: 0;left: 0;}

  28: ul { list-style-type: none;}

Itu saja. Jalankan Prestashop Anda, maka akan memiliki tampilan seperti dibawah ini:

presta2

-> Download modul Editorial yang telah dimodifikasi diatas.
-> demo http://shop.afasyah.web.id