By Webs

Jquery Add to Cart Fly ala Prestashop

2013-04-10T00:08:00.003-07:00

Hi haloo,
On this post I will share an amazing Add to Cart jquery animation which use by Prestashop.
For an e-commerce website, it can mean a better shopping experience for customers where they can easy to use, beautiful animation which make the site more interesting, so they can concentrate more on the products which may result in better sales.

Ok, Now I will let you know how the basic of the source.
1. We make a Html file with code below

<table cellpadding="0" cellspacing="0">

    <tr>
     <td width="400px">
         <div>
                <div class="image"><img src="1.jpg" /></div>
                <div><a class="addCart">Add to Cart</a></div>
            </div>
            <div>
                <div class="image"><img src="1.jpg" /></div>
                <div><a class="addCart">Add to Cart</a></div>
            </div>
        </td>
        <td width="100px" valign="top">
         <div id="shoppingCart">
          <h3>Shopping Cart</h3>
            </div>
        </td>
    </tr>
</table>

2. Include the javascript code below your html code

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(".addCart").click(function(){
 var imgsrc = $(this).parent().parent().children(".image").children().attr('src');
 var imgpos = $(this).parent().parent().children(".image").children().position();
 var imgsrcstyle = "position:absolute;opacity:0.8;display:none;left:"+imgpos.left+"px;top:"+imgpos.top+"px;z-index:99999;";
 var this_parent = $(this).parent();
  
 // Ajax request
 $.ajax({
     type: "POST",
     url: "update.php",
     data: ({id:'2'}),
     dataType: "json",
     cache: false,
     success: function(result){
  if(result['status'] == 'true'){
     // make clone image
     this_parent.append('<img src="'+imgsrc+'" style="'+imgsrcstyle+'" class="cloned" />');
     
     // call animate fly
     fly(result);
  } else {
     alert('Failed add product to cart');
  }
      }
 });   
});
 
function fly(result){
 var box = $('#shoppingCart').position();
 $(".cloned").show().animate({ "opacity": 0.2,"top":(box.top + 20),"left":(box.left + 20),"width":10},1500,function(){
    $(this).remove();
   
    // update action
    alert('yay success!');
 }); 
}
 
});
</script>

For the complete source you can download here.
Hope it can help you guys.

Best regard,
Bayu Prawira

Module Block User Online / Visitor Counter Prestashop 1.5

2013-01-31T22:49:00.000-08:00

Hi guys, Are you looking for block user online / visitor counter widget in prestashop 1.5?
Download module here.

1. unzip it. put blockuseronline directory module in prestashop\modules.
2. go to your admin panel. (www.myshop.com/adminxxx)
3. On main menu choose Modules -> Modules
4. All modules will appear.
5. On left side menu, choose other modules (on the bottom).
6. Install block user online modules then visitor counter widget will appear in your front page

This is sample image of the result:

Best regard,
Bayu Prawira

View Counter (Update field +1) - Cakephp

2013-01-28T17:47:00.000-08:00

Hi Hallo,
This week (29 jan 2013), I still work in my current project with cakephp framework.
Today I find small problem but I will always share with you guys. I work on I called view counter, where if there any client view detail of any property in my site, it will update field count in database +1.
Maybe it look easy if we do with php and sql. But how we can do it with cakephp framework?

I'm googling, and found this code below:

$this->Article->updateAll(
             array('Property.count' => 'Property.count + 1'),
             array('Property.id' => 5)

);

Hope it can help,
But if you still have any question, write your comment below.

Kind regard,
Bayu Prawira

Get date of one week based on week number - php

2013-01-24T19:56:00.000-08:00

Hi, ,
There are many kind of php function you can use for datetime manipulation. But today I will share a short code that you can use for get date of one week based on your week number.

I have created a function that you can use or develop
Let see my function below :

<?php
 function get_date_in_week($year,$week_number){
  $date = array();
  
  // 1 week 7 days
  for($day = 1; $day <= 7; $day++){
   
   $set_date = strtotime($year."W".($week_number<10?'0':'').$week_number.$day);
   
   if(date('Y',$set_date) == $year){
    $date['year-'.$year]['week-'.$week_number]['day-'.$day] = date('j', $set_date);
   }
   
  }
  
  return $date;
  
 }
?>

Now, you can simple to use, just call the function then you will get date of one week based on your week number.

<pre>
 <?php
  $year = '2013';
  $week_number = '2';
  print_r(get_date_in_week($year,$week_number));
 ?>
</pre>

The result will be like this :

Array
(
    [year-2013] => Array
        (
            [week-2] => Array
                (
                    [day-1] => 7
                    [day-2] => 8
                    [day-3] => 9
                    [day-4] => 10
                    [day-5] => 11
                    [day-6] => 12
                    [day-7] => 13
                )

        )

)

Hope it can helps.
But if you still need help, just write your comment below.
I will try to find out.

Kind regard,
Bayu Prawira

Jquery Image Slide on Hover

2012-12-24T21:58:00.001-08:00

Hello,
In this post I will share about a simple jquery to animate an image when hovering. basically it is using jQuery’s animate() effect. I will use this effect to make transaction when hovering the image.
Let's looks the demo in the url below :
Jquery Image Slide

Ok, I begin with html code :

<div id="vertical" class="clear">
    <!-- Vertical -->
    <h2>jQuery image slide on hover effect (vertical)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>
<div id="horizontal" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (horizontal)</h2>
    <div><a href="#"><img src="image-4.jpg" alt="" /></a></div>
    <div><a href="#"><img src="image-5.png" alt="" /></a></div>
</div>
<div id="easeOutBounce" class="clear">
    <!-- Horizontal -->
    <h2>jQuery image slide on hover effect (easeOutBounce)</h2>
    <div><a href="htmldrive.net"><img src="image-2.png" alt="" /></a></div>
    <div><a href="#"><img src="image-1.jpg" alt="" /></a></div>
</div>

We have 3 main div contain image links. each image has two face, maybe it will easier when you look image below :

image-1.jpg

image-2.jpg

Then defined simple jquery.imageslide.js to make it work, you can download full source Jquery Image Slide.

jquery.imageslide.js has 3 transaction type (vertical, horizontal,easeOutBounce) and you can use it with multiple images

Now you can set up the property of image slide as below:

<script type="text/javascript">
        $(document).ready(function(){
            $('#vertical div a').imgslide({
                width: 296,
                height: 130,
                animate : "vertical",
                duration : 300
            });
            $('#horizontal div a').imgslide({
                animate : "horizontal",
                duration : 300
            });
            $('#easeOutBounce div a').imgslide({
                animate : "easeOutBounce",
                duration : 800
            });
        });
    </script>

Run your code, it will work like a charm ^^.
That's all, hope it useful

Best regard,
Bayu Prawira

Add New Font for Dompdf

2012-12-24T01:05:00.003-08:00

Hi Hallo,
In this post we will talk about PDF file conversion exactly DomPDF.
It allows direct conversion of HTML files to PDF files. But I found some issues when I was using this module, when I tried to generate pdf file, the result was not same as my html file. Some of fonts didn't apply in the pdf file. I goggled the web and found some solutions. And now I solved it.
I will share how to add your own font for dompdf,

1. For the simple step please go here DOMPDF web-base
2. Complete the form and upload your own font

Make sure your dompdf version same with version in the form and Go

3. Download and extra the result (.zip). then Copy the contents of the result( .tff, .ufm) to your DOMPDF fonts folder (typically located at dompdf/lib/fonts).

4. If you have not previously installed fonts, you can rename the file dompdf_font_family_cache.sample(this file from the archive) to be dompdf_font_family_cache.dist.php (located at dompdf/lib/fonts). If you have previously installed fonts you will need to copy the relevant entry from the sample file into dompdf_font_family_cache.dist.php file.
Below is example for add some entry to dompdf_font_family_cache.dist.php

5. Once you have taken these steps your font should be installed and ready to use.

Hope it can help, but if you still have any question
Please feel free to write your comment below.

Kind regard,
Bayu Prawira

Get original size of image ( Jquery )

2012-12-20T21:22:00.002-08:00

Hi buddy, Today I will share a short code to get original size of image on page that has been resized to fit in a div. It usually needed when you make photo gallery with thumbnail images. Ok, here we go, Lets look for the demo

Width: x Height:

Then look for the code,
We will take the original size of image by using Jquery.
Defined the jquery in your head container

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Html code of image:

  <html>
     <head>
          // Defined Jquery
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

     </head>
     <body>
         <div id="myimg">
             <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaXD9e5dDWD2dh5V-5pIegk_ipN2nZD9zp9miIYq_FQr_H-iy34uH5cPRDpHeKB2IbATqYv4j78uvqK4R50UZeeqexd1oU97SZ9b3SzpsqI2JS8z_twEqH9Snmjk2L3Kb_uk8N41l4iJg/s1600/nusa-dua.jpg" height="200" width="300" />
         </div>
     </body>
  </html>

And below is the code to get original size of image:

$(document).ready(function(){
    var img = new Image();
    img.onload = function() {
        alert("width:"+this.width+" x Height:"+this.height;
    }
    img.src = $('#myimg img').attr('src');
});

Include get original size of image code in html:

  <html>
     <head>
          // Defined Jquery
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
          
          // Get original size code
          <script type="text/javascript">
               $(document).ready(function(){
                   var img = new Image();
                   img.onload = function() {
                       alert("width:"+this.width+" x Height:"+this.height;
                   }
                   img.src = $('#myimg img').attr('src');
               });
          </script>
     </head>
     <body>
         <div id="myimg">
             <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLaXD9e5dDWD2dh5V-5pIegk_ipN2nZD9zp9miIYq_FQr_H-iy34uH5cPRDpHeKB2IbATqYv4j78uvqK4R50UZeeqexd1oU97SZ9b3SzpsqI2JS8z_twEqH9Snmjk2L3Kb_uk8N41l4iJg/s1600/nusa-dua.jpg" height="200" width="300" />
         </div>
     </body>
  </html>

Well done,
hope it will help,
Thank you for visit my blog,
If you have any question, just write comment below.

Best Regard,
Bayu Prawira

Make Label in Front / Top of Frame Visual Basic 6

2012-12-19T21:05:00.001-08:00

Hi,
In this post I will share about label and frame issue in Visual Basic 6,
For newbie in VB6 (my experience), it sometime makes confuse
This is not too big problem, but it got stuck in my head before.

Ok, I will let you know the solution how to make label in front of frame
It is simple way but it works perfectly
just cut your label and paste in your frame

Well done,
Hope it useful, but if you have any question, just write a comment below.

Best regard,
Bayu Prawira

Credit Card Number for Tester

2012-12-18T23:41:00.002-08:00

When make new program or system with payment method, programmers always need credit card number tester to test and make sure their program work well.

So the table below contains a number of credit card numbers that can be used to test credit card handling software. None of these numbers will work when trying to buy something (if you hadn't guessed).

Card Type	Number
Master Card (16 Digits)	5105105105105100
Master Card (16 Digits)	5555555555554444
Visa (13 Digits)	4222222222222
Visa (16 Digits)	4111111111111111
Visa (16 Digits)	4012888888881881
American Express (15 Digits)	378282246310005
American Express (15 Digits)	371449635398431
Amex Corporate (15 Digits)	378734493671000
Dinners Club (14 Digits)	38520000023237
Dinners Club (14 Digits)	30569309025904
Discover (16 Digits)	6011111111111117
Discover (16 Digits)	6011000990139424
JCB (16 Digits)	3530111333300000
JCB (16 Digits)	3566002020360505

source : http://www.crazysquirrel.com/finance/test-cc.jspx

Best regard,
Bayu Prawira

Simple Multiple Marker, Calculation Route, Custom Marker on Google Map

2012-12-13T22:36:00.001-08:00

Hi Hallo, ,
Today I will share some code to make simple multiple marker on Google map. This code will show a google map in your web page with a place marker base on your locations. You can also custom the icon marker by yourself and active or inactive the calculation route.

Ok, You can see for the demo below:

So now, we start the code,
1. First we must define our code with google map api and jquery

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

2. Copy paste code below, make sure the code between <head>{your script}</head>

<script type="text/javascript">
 var map;
 var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
 var global_markers = [];

// Represent your location here    
 var markers = [[-8.580467, 115.163001, 'My Home - Kekeran, Mengwi, Bali'],[-8.724085,115.180407,'Office - Simpang siur, Kuta, Bali']];

 var infowindow = new google.maps.InfoWindow({});

 function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers:true});
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-8.580467, 115.163001);
  var myOptions = {
   zoom: 11,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  directionsDisplay.setMap(map);

  // if you don't want to use  calculation route, inactive calcRoute() function

// and call addMarker() here

calcRoute();

  }

 function addMarker() {
  for (var i = 0; i < markers.length; i++) {
   // obtain the attribues of each marker
   var lat = parseFloat(markers[i][0]);
   var lng = parseFloat(markers[i][1]);
   var trailhead_name = markers[i][2];

   var myLatlng = new google.maps.LatLng(lat, lng);

   // customize the content buble here

   var contentString = "<html><body><div><h2>" + trailhead_name + "</h2></div></body></html>";

   // customize icon marker here

   var icon_img = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRmdVDVsRgbZXd4aoyhWNjP2px16J4nwpvLym4MrMLWEyzGBiTDRe_NDQHL5FU4QYJow0iN_WehzhIbReVMB6enMGtO1kb-xHTDEi83Rcp9RMh1k_Cb5SdqYoFQHCWYZBvrDpvB_Ta2l77/s1600/location.png";

   var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: icon_img,
    title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
   });

   marker['infowindow'] = contentString;

   global_markers[i] = marker;

   google.maps.event.addListener(global_markers[i], 'click', function() {
    infowindow.setContent(this['infowindow']);
    infowindow.open(map, this);
   });
  }
 }

 function calcRoute() {

        start  = new google.maps.LatLng(-8.580467, 115.163001);
        end = new google.maps.LatLng(-8.724085, 115.180407);
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
     addMarker();
   }
  });
    }

 window.onload = initialize;
</script>

3. Add new css for map (in <head> container)

<style type="text/css">
 #map_canvas{
    width: 400px;
    height: 300px;
 }
</style>

4. Then the last step, create the html code

<div id="map_canvas"></div>

Ok well done, save your file and try to run it.
Download complete source here
Hope it usefull, if there any question, just write your comment below.
I will replay asap ^^

Best regard,
Bayu Prawira

Download Crack/Keygen Dreamweaver Cs5

2012-09-16T00:37:00.002-07:00

Adobe® Dreamweaver® CS5 is the industry-leading web authoring and editing software that provides both visual and code-level capabilities for creating standards-based websites and designs for the desktop, smartphones, tablets, and other devices.

Dreamweaver is one of the most popular tools for developers. It provides a range of functionalities and supports almost every technology that is in use today over the web. I came across this wonderfull keygen that can help you activate your trial version of Dreamweaver CS5 to full version . There are some steps and precautions that you will have to follow while using this keygen .

Download a trial version of Dreamweaver CS5 from Adobe website.
Then install the trial version of the software. The trial version is of 30 days.
Now extract the rar keygen folder and execute the keygen .
A key will be generated , copy the key and paste it in the activation region in Dreamweaver CS5 .
Your version will be full now.

If the key gets blocked then again follow the same steps to activate a new key and keep enjoying the full version.

Download Keygen Here.

Best Regard,
Bayu Prawira

How to Add Facebook Like Box on Blogger?

2012-09-08T07:03:00.000-07:00

What is a Facebook Page?

Pages are for businesses, organizations and brands to share their stories and connect with people. Like timelines, you can customize Pages by adding apps, posting stories, hosting events and more. Engage and grow your audience by posting regularly. People who like your Page will get updates in their news feeds. Read more.

On this post I will share about "How to Add Facebook Like Box plugin on Blogger", so it is an effective way to ensure you keep in touch with your blog visitors on the world’s favorite social network.
Ok, let's follow the easy step.

First, make sure you already have or create Facebook fans page.
for example just use my facebook fans page, http://www.facebook.com/bywebsite .

1. Click here to get started.
2. Then put your url fans page on "Facebook Page URL" input form.

Setting your Like box as you want by change the width, height, color schema and ect.
3. Click on Get Code when done with the configuration.
4. In your like box plugin code window, please select iframe tab, for get easy code to make it works.

5. Copy all code for your like box.
6. Login to your blogger account, then choose layout.
7. Select Add a Gadget (HTML/Javascript) on the location you wish the facebook like box to appear.

8. Paste your code and Save.

9. View your blog and the Widget should appear at the very spot.

We have finished !!, wish your blog look more beauty :)
If you have suggest or any questions, just write your comment below.
Good luck !

Best Regard,
Bayu Prawira

Highlight Code/Scripts in Post Article

2012-09-08T06:15:00.000-07:00

Someday, I confused when I tried to make some code tutorial in my post. I have made some code tutorial in my post but it didn't look nice when I displayed. On the other side when I have browsed and looked for the others blogs, They have made like highlight for their code tutorial.How have they make it?

I had googling for it and I got some tips to solve it.

You can use a simple way by put some css code to your template

Login to your blogspot account
Choose "Template" on your menu
On template page choose "Edit HTML"
push ctrl + f on your keyboard for search this code "]]></b:skin>"
Copy paste code below before "]]></b:skin>" code.

/* interface code */
.code{margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #e0ffff;
border: 1px solid #000000;
border-style: dashed }

Ok, already done. You can save your template now.
For using this css, you can use <p> element for example

<p class="code">{your script here}</p>

The result will display like the image below :

Ok, that's all,
If you have suggest or some questions, just write on comment form below,
Hope it helpful for all and good luck,

Best Regard,
Bayu Prawira

Easy Install Trac with VisualSvn Server on Windows 7

2012-09-07T00:06:00.001-07:00

Hi Haloo, ,
On this post we will talk about "Trac Installation",
Trac is an enhanced wiki and issue tracking system for software development projects. Trac uses a minimalistic approach to web-based software project management. Read more about Trac here.

Ok, now I will explain step by step of Trac installation.
1. Install VisualSVN Server 2.1 using default settings, or download software here.
2. Make sure your machine already installed Tortoise SVN, download software here .
3. Download Trac for VisualSVN Server here VisualSVN-Server-Trac-2.1.1.21699.zip.
Unzip it to C:\Program Files\VisualSVN Server directory.
Then reboot system.
4. Create folder C:\Trac and allow "Full control" access.
5. Open VisualSVN Server Software, create new user
username : bayu
password : bayu

6. Create new Repository. Right click on Repositories folder -> Create New Repository
(remember to give checked on create default structure)

7. Take look on Your Repositories of your VisualSVN Server.

8. Then follow some steps below.
- Right click on your project repository -> Properties -> Add -> Add your user -> Ok

- Copy trunk url of your repository

- Checkout your repository trunk by tortoise svn (Please take look on image below)

9. Then try to look on your repository root, D:\Repositories\projecttest (trunk folder will checked green).
10. Make new folder inside trunk folder, D:\Repositories\projecttest\trunk\project. and add the folder by tortoise svn.

11. Add system variable for your system
Control Panel -> system and security ->system -> advanced system settings -> Environment variable -> New

PythonHome = C:\Program Files\VisualSVN Server\Trac\python

12. Open command prompt and goto C:\Program Files\VisualSVN Server\trac directory

13. Input you project details

Project Name set to projecttest
Database connection string, hit Enter for default
Repository type, hit Enter for default of svn
Path to respository, D:/Repositories/projecttest

For the success result will give you "Congratulations!" text.

14. Add the following text to file C:\Program Files\VisualSVN Server\conf\httpd-custom.conf

LoadModule python_module "trac/python/mod_python_so.pyd"
LoadModule authz_user_module bin/mod_authz_user.so
<Location /trac>
  SetHandler mod_python
  PythonInterpreter main_interpreter
  PythonHandler trac.web.modpython_frontend
  PythonOption TracEnvParentDir C:\Trac
  PythonOption TracUriRoot /trac

  AuthName "Trac"
  AuthType Basic
  AuthBasicProvider file
  AuthUserFile "D:/Repositories/htpasswd"

  Require valid-user
</Location>

15. Open your lovely browser and try to access http://localhost/trac or https://localhost/trac (if you are using secure connection) in a browser, enter username and password.

16. If you still have problem or can not access http://localhost/trac, change the port of visualSVN server.
Open your visualSVN server -> open the properties dialog box for the current selection -> network tab -> change the port to 8000.

- Restart your VisualSVN Server (menu bar "Action" -> Restart), then look for your server url and port

on mine is https://admin-PC:8000/svn/ but try to open this page https://admin-PC:8000/trac/projecttest

Ok, finished all. Now you can manage your project management.
Hope it helpful for all, but if you still have questions just write your comment below

Best regard from Bali,
Bayu Prawira

Add element li by using jQuery ( After & Before)

2012-07-05T23:42:00.001-07:00

Hello everybody, , :D

Ok, as my title above, today I will share about how to add new element li by using jQuery (after & before). It is possible for you to add new element li with position like you want. So you don't need to make many code for simple task.

This way the code :

## before 

$(".byweb2").before("<li>Added Test before Test 2</li>"); 

## after

$(".byweb2").after("<li>Added Test before Test 2</li>");

You can download the complete code Klik Here
If you have any question, just write your comment below.
I will try to help you as my best :)

Warm regard from Bali Island

Replace All Space or X character in Javascript

2012-06-06T08:01:00.001-07:00

Hi guys,
Today I will share a little something about Javascript.

It is small thing but I think it is really - really important, because I have confused about it before :D.
It is about how to remove or replace all of space or x character on your string using Javascript.
I suggest you to use this way, for example :

var bywebs = "1,2,3,4,5,6,7,8,9";
bywebs = bywebs .replace(new RegExp(',', "g"),' '); // it will replace all "," with "(space)"

// result 1 2 3 4 5 6 7 8 9

Ok, this is a simple way, but very helpfull :)
Hope it can helps you.

Warm greeting from Bali

Table and Model Name - Cakephp

2012-05-29T07:20:00.000-07:00

Hi everyone,

Long time I have no post something.
Today I will write something about "Table and Model Name in Cakephp".
As you know, in Cakephp we should write the name of table in plural.
I mean for example if you want make table with name "user" you should make it like "users" and "post" should be "posts".

So how to handle table names that are written in singular with "...y"?
hehe ... just so simple, I make an example with table name "entry" and it should be "entries". :D

But for Model name in cakephp you should write the name in singular.
you already have a table "entries", than in your app\models , you should make a new file for model. The name of the file is "entry.php" (in singular 'user.php, post.php').
And below is basic code for Model Name :

class Entry extends AppModel {
 var $name = 'Entry';
}

How about if we use underscore in our table names??
for example you have table name "categories_lists", how will we make the Model name?
I show you the simple way,
in your app\models, create a new file with name "categories_list.php".
write this code inside of the file :

class CategoriesList extends AppModel {
 var $name = 'CategoriesList';
}

Ok, that's all
if you have any question, just write your comment below :D
Thanks for your visit.

warm regard from bali :)

Auto Request and Manage Json Data

2012-04-18T09:38:00.001-07:00

Hello, ,
Today I have got a new knowledge from programming website.
This is about data-interchange format. Did you ever hear about JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.( you can read more in www.json.org ).

This is example of json data :

{"name":"bywebs.blogspot.com","time":"12 : 20 : 56"}

And now I will make a tutorial to auto request and manage json data every x seconds. But in this tutorial I will use a jquery script (jquery-1.6.1.min.js).

Let's see for my code :

<script type="text/javascript">

    var auto_refresh = setInterval(function(){ // interval auto refresh
 
        $.getJSON("json.php", function(json) { // request method using jquery

                                               // json.php will return json data

            // parsing data

            var table = '';

            table += '<tr><td>Name</td>';

            table += '<td>'+json['name']+'</td></tr>';

            table += '<tr><td>Server Time</td>';

            table += '<td>'+json['time']+'</td></tr>';

            

            //inser data to Id bywebs

            document.getElementById('bywebs').innerHTML = table;


         });

     }, 5000); // will request json every 5 seconds, you can change it

</script>

You can develop this code by yourself.
so for the complete code you can "Download here".

Hope it useful for all, if you have any question and suggestions, just write your comment below. :)

Good Luck.

Replace space and all Illegal character on string - PHP

2012-04-16T00:21:00.002-07:00

Hi, ,
Do you search for how to replace/remove illegal character (@#$%^&* etc) in your text string?
On this post I will share you simple code to make it.
This code will only allowed numbers (0-9) and characters (a-z).

my code :

<?php
    $string = 'by^#^we%%&bs.b_((logs+)&#@pot.()*)(~co!~@#_+m';
    $string = preg_replace('/[^0-9 a-z]+/i', '', $string);
    
    echo $string;
?>

And below is code for replace multiple space on your text string

<?php
    $string = 'by   webs.   blog  spot.  com';
    $string = str_replace(array(' '),array(''),$string);
    
    echo $string;
?>

Hope it will useful for all,
If you have questions or suggestions, please write your comment below.

Good Luck :)

Make Confirm Dialog Javascript

2012-04-14T02:22:00.000-07:00

Hello every body,
When the first time I learned javascript code, I was really happy when I succeed to make pop up dialog, :D
And now I will share a simple code to make a confirmation dialog before you do the actions.
I have some ways, but the simple one is:

<a href="http://bywebs.blogspot.com" onClick="return confirm('Do you realy want to visit my website?');"> My Website </a>

Demo

My Website

Beside that I also have the second way, but it will use a function.
Let's take a look

<script type="text/javascript">
    function _confirm(url){
        if(confirm('Do you realy want to show my link?')){
            document.getElementById('myDiv').innerHTML = "<a href='"+url+"'> My Website</a>";
        }
    }
</script>

<a onClick="_confirm('http://bywebs.blogspot.com');">show my link</a>
<div id="myDiv"></div>

Demo

show my link

That's all :).
Hope it will useful, if you have any question , just write your comment below.
Thanks and Good luck

Cut a string after X characters -- PHP

2012-04-12T22:15:00.000-07:00

Hi guys, ,
In this my post, let's we talk about string manipulation using PHP code.
There are many functions of php that you can use to manipulation your string.
But now I will share you a simple way how to cut a string after x characters.
We will use 2 manipulation functions of php, they are strlen ( for count characters of your string ) and substr ( for cut characters of your string ).

This is my code :

<?php  
    if(isset($_POST['submit'])){          
            
            $text = $_POST['text'];
            
            //check if you have value in text.  
            if(empty($text)){  
               echo "<h3>Error: Please complete the form.<a href=\"$_SERVER[PHP_SELF]\">back</a></h3>";  
               exit(); //exit the script and don't process the rest of it!  
            }  
            
            $limit = 10; //limit the char will cut
            if (strlen($text) > $limit) {
                $text = substr($text, 0, $limit) . '...'; //if $text more than $limit char will replace with (...)
            } else {
                $text = $text;
            }
                   
            //success message, redirect to main page.          
            $msg = urlencode("Result of your string : <h4>$text</h4> <a href=\"cut_string.php\">Try again?</a>");  
                header("Location: cut_string.php?msg=$msg");  
                exit();  
              
          
    }else{  
            //if there is a message, display it  
            if(isset($_GET['msg']))  
            {  
                //but decode it first!  
    
                echo "<p>".urldecode($_GET['msg'])."</p>";  
            }  
            //the upload form  
        echo "  
        <h1>Simple code to cut a string after X characters PHP - <a href=\"http://bywebs.blogspot.com\">bywebs.blogspot.com</a></h1>
        <form action=\"$_SERVER[PHP_SELF]\" method=\"post\"enctype=\"multipart/form-data\">\n  
        <p>Your text:<input type=\"text\" name=\"text\" /></p>\n  
        <p><input type=\"submit\" name=\"submit\" value=\"Submit\" /></p>";  
    }  
?>

Just a simple code :)
Let's try for your self, for the complete file you can "Download Here".
Hope it useful for all, if you have any question, you can write your comment below :)

Good Luck :)

Simple Upload and Resize Image using php

2012-04-12T10:00:00.000-07:00

According to my post title above, now I will share a simple code about make upload and resize image using php. Exactly the code I got from searching on google, but I have made a little modification so now the code become a bit nicer than before. hehe ;).

Let's take look for my code:

Resize.php

<?php

if(isset($_POST['submit']))
    {        
        //directory destination , make sure this directory is writable!
        $path_thumbs = "C:\\bayu";
        $path_big = "C:\\bayu\\thumb";
        
        //the new width of the resized image, in pixels.
        $img_thumb_width = 100; // 

        $extlimit = "yes"; //Limit allowed extensions? (no for all extensions allowed)
        //List of allowed extensions if extlimit = yes
        $limitedext = array(".gif",".jpg",".png",".jpeg",".bmp");
        
        //the image -> variables
        $file_type = $_FILES['vImage']['type'];
        $file_name = $_FILES['vImage']['name'];
        $file_size = $_FILES['vImage']['size'];
        $file_tmp = $_FILES['vImage']['tmp_name'];

        //check if you have selected a file.
        if(!is_uploaded_file($file_tmp)){
           echo "Error: Please select a file to upload!. <br>--<a href=\"$_SERVER[PHP_SELF]\">back</a>";
           exit(); //exit the script and don't process the rest of it!
        }
       //check the file's extension
       $ext = strrchr($file_name,'.');
       $ext = strtolower($ext);
       //the file extension is not allowed!
       if (($extlimit == "yes") && (!in_array($ext,$limitedext))) {
          echo "Wrong file extension.  <br>--<a href=\"$_SERVER[PHP_SELF]\">back</a>";
          exit();
       }
       //so, whats the file's extension?
       $getExt = explode ('.', $file_name);
       $file_ext = $getExt[count($getExt)-1];

       //create a random file name
       $rand_name = md5(time());
       $rand_name= rand(0,999999999);
       //the new width variable
       $ThumbWidth = $img_thumb_width;

       //////////////////////////
       // CREATE THE THUMBNAIL //
       //////////////////////////
       
       //keep image type
       if($file_size){
          if($file_type == "image/pjpeg" || $file_type == "image/jpeg"){
               $new_img = imagecreatefromjpeg($file_tmp);
           }elseif($file_type == "image/x-png" || $file_type == "image/png"){
               $new_img = imagecreatefrompng($file_tmp);
           }elseif($file_type == "image/gif"){
               $new_img = imagecreatefromgif($file_tmp);
           }
           //list the width and height and keep the height ratio.
           list($width, $height) = getimagesize($file_tmp);
           //calculate the image ratio
           $imgratio=$width/$height;
           if ($imgratio>1){
              $newwidth = $ThumbWidth;
              $newheight = $ThumbWidth/$imgratio;
           }else{
                 $newheight = $ThumbWidth;
                 $newwidth = $ThumbWidth*$imgratio;
           }
           //function for resize image.
           if (function_exists(imagecreatetruecolor)){
           $resized_img = imagecreatetruecolor($newwidth,$newheight);
           }else{
                 die("Error: Please make sure you have GD library ver 2+");
           }
           //the resizing is going on here!
           imagecopyresized($resized_img, $new_img, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
           //finally, save the image
           imagejpeg ($resized_img,"$path_thumbs/$rand_name.$file_ext");
           imagedestroy ($resized_img);
           imagedestroy ($new_img);
           
           
        }

        //ok copy the finished file to the thumbnail directory
        move_uploaded_file ($file_tmp, "$path_big/$rand_name.$file_ext");
             
        //success message, redirect to main page.        
        $msg = urlencode("$title was uploaded! <a href=\"Resize.php\">Upload More?</a>");
            header("Location: Resize.php?msg=$msg");
            exit();
        
    
}else{
        //if there is a message, display it
        if(isset($_GET['msg']))
        {
            //but decode it first!
            echo "<p>".urldecode($_GET['msg'])."</p>";
        }
        //the upload form
    echo "
    <form action=\"$_SERVER[PHP_SELF]\" method=\"post\"enctype=\"multipart/form-data\">\n
    <p>File:<input type=\"file\" name=\"vImage\" /></p>\n
    <p><input type=\"submit\" name=\"submit\" value=\"Submit\" /></p>";
}

?>

Upss, , it's long enough, but never mind because I'm sure the code will work as well.
Notice : make sure the directory destination , is writable!

       $path_thumbs = "C:\\bayu";
       $path_big = "C:\\bayu\\thumb";

or you can change it as you want. :)
for the complete file you can "Download here"
Okay, that's all.!!
if you have any question just write your comment below :)

Good Luck!!

Slide up down (Toggle Slide) using jquery

2012-04-10T00:13:00.001-07:00

Hello everybody,
Now I will share how to make slide up and down (toggle slide) using jquery.
And this is for the demo, check it out :

- Category

List Category 1

List Category 2

List Category 3

Ok, Let's take look for the code:

I just use a jquery script (jquery-1.6.1.min.js) and a simple script to call toggle jquery

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
         //$(".block-t-content").hide(); just active this if u want hide for default
         $("#bywebs").click(function(){
            $(this).toggleClass("active").next().slideToggle("slow");
            return false;
        });
    });
</script>

This is my css code:

<style type="text/css">
#content {
    border:1px solid #c5c5c5;
    width:200px;
    margin:0px 5px;
    border-radius:4px;
}
#main {
    background:#c5c5c5;    
}
</style>

And the last is my html code :

<div id="content">       
    <div id="bywebs">
        <div id="main">- Category</div>
    </div>
    <div class="block-t-content">
        <div class="block">
            <div>List Category 1</div>
            <div>List Category 2</div>
            <div>List Category 3</div>
        </div>
    </div>
</div>

Finished!!That's all.
For the complete file, you can download in this link 'Download Toggle slide'
Hope it useful for all, if you have any question, you can write your comment below :)

Good Luck :)

Add and Remove table row (javascript).

2012-04-08T22:59:00.001-07:00

Hi everyone,
Now I will share a simple script how to Add and Remove table row by javascript.
exactly it was my problem before, it made me very confused because sometime when it work, it removed wrong row, so oh god . . .
But now I have fixed it.

I have a table with some task,

When we click delete button, it will delete the right row and if we click add button it will automatically add new row on the last of table.
Look for the script below :

#javascript

<script type="text/javascript">
    function remove(id){
        // initial variable
        var table = document.getElementById('schedule'); // get table id
        var rows = table.getElementsByTagName('tr'); // get all table rows
        var target = id; // row will remove
        var j = 1;
        
        for(i=0;i<rows.length;i++,j++){
            if(rows[i].id==target){
                table.deleteRow(i); 
                i--;
            }else{
                j--;
            }
        }
    }
    
    function add(){
        var table = document.getElementById('schedule'); // get table id
        var lastRow = table.getElementsByTagName('tr').length; // get last row
        var newId = lastRow+1; // make new id
        
        var row = document.getElementById('schedule').insertRow(lastRow); // create row
        row.setAttribute('id','task'+newId); // insert row id
        
        var cell0 = row.insertCell(0);// create cell 1
        var cell1 = row.insertCell(1);// create cell 2
        cell0.innerHTML = 'Task '+newId+' - Default'; // insert data cell 1
        cell1.innerHTML = '<a style="cursor:pointer;" onClick="remove(\'task'+newId+'\');" >X</a>';// insert data cell 2
    }
</script>

#HTML script

<table cellpadding="0" cellspacing="0" width="300" border="1" id="schedule">
<?php
 for($i=1; $i<5; $i++){
?>
  <tr id="task<?php echo $i; ?>">
            <td>Task <?php echo $i; ?> - Default</td>
            <td><a style="cursor:pointer;" onClick="remove('task<?php echo $i; ?>');" >X</a></td>
        </tr>
<?php
 }
?>
</table>
<input type="button" onClick="add();" value="add" />

Hope it useful for all, if you have question, just write your comment below.

Good luck :)

Build New Category Widget for Your Website

2012-04-05T21:54:00.000-07:00

Hallo , ,
Come back again,
On this post, I still share about how to make your website ( blogspot) look nicer.

Now we will build a new widget to grouping all of your article based on their categories.
Categories widget is very important thing for your website, otherwise it will group all of your article based on their categories, it also will make your visitors become easy when they read or just look for your articles.
So surely your website will look nicer and professional.

I have simple way to build it by using standard additional widget from blogspot platform
Ok, let's see how we will make it.

Login to your website account
Choose "Layout" on your menu
Then choose "Add a Gadget" on your sidebar layout, it will show a pop up window with many gadget choices. On this part you should choose "Label" gadget. And new window will display an image below.

Change the title become "Categories". yupss, finished.
You can push Save button now.

Note : Categories widget will group your articles based on their labels, so don't forget to put labels when you create a new post for your website.

Hope it useful for all, Thank you :)