I do not normally post anything related to IDE’s but I thought this article was worth as it supports Yii as one of the frameworks of the IDE. Thought this could be a good IDE for those Window Yii’ers out there.

Codelobster

For valuable work on creation of sites you need a good comfortable editor necessarily. There are many requiring paid products for this purpose, but we would like to select free of charge very functional and at the same time of simple in the use editor - Codelobster PHP Edition.

Let us consider some important possibilities and advantages of this program:

• All code highlights depending on a type, the also mixed code is thus supported, so the area of HTML will be highlighted as HTML, PHP as PHP, and Javascript as Javascript in a the same file. Thre is possibility of choice from color schemes, including popular IDEs.
• Powerful autocompletion for HTML, PHP, CSS and Javascript, including HTML5 and CSS3. For PHP the structure of project is fully recognized, and the complete list of methods falls out in the proper places.
• HTML/CSS inspector on the type of Firebug, which allows easily to correlate the selected elements of page with a code and proper style.
• Context help on all supported languages. By pressing F1 key the page with detailed description for current tag, attribute or function will be opened.
• PHP debugger. PHP debugger allows to execute PHP scripts incrementally, watching the values of all variables in every line.
• SQL manager allows to produce all necessary actions with a database – to add, delete, edit a structure and records in tables, to export data, execute SQL queries. Highlighting and autocompletion works for SQL files also.
• Support of FTP allows to work straight with a remote server and to do all necessary changes with files;
• The portable option allows to use editor without the preliminary installation.
• Other useful utilities: pair highlighting, possibility of blocks selection, collapsing, tooltips, navigation on descriptions of functions and included files at withholding of the key of CTRL, viewing of structure of files and project, preview in a browser, book-marks, and all other standard possibilities for work with a code.

Also there are special plugins for work with

• CMS: Drupal, Joomla
• PHP frameworks: CakePHP, CodeIgniter, Symfony, Yii
• JavaScript libraly: JQuery
• WordPress blogging engine
• Smarty template engine

How to work with Yii and CodeLobster

Watch this video on YouTube.

Tweet this!

Don’t get us wrong, the forum is amazing, highly addictive (you can check our profiles -mdomba an tonydspaniard to find out how we love that forum) and very useful thanks to the support of a lot of good programmers that freely give aways their time to help others get the right answers, in order to push Yii to the level where it supposed to be in terms of PHP community acceptance.

Nevertheless, one of the things that we face as the forum grows is that the same questions are repeated again and again, and we believe that this is not because users do not know how to search for a solution but for the structure and functionality of a forum itself. We always thought that could be great to have a site to keep questions and its solutions in a categorized tree where people could easily browse, search, and/or find what they are looking for, and this is why Yiianswers.com is here.

Yiianswers.com is an instant Questions and Answers site, so popular nowadays. We really hope that will help you out and will easy the task of finding the right answers to your Yii questions.

Tweet this!

Introduction

This is another article from a feature requested by a EGMap Yii Extension User. He proposed me when the following will be incorporated to the library: http://gmaps-samples-v3.googlecode.com/svn/trunk/sidebar/random-markers.html.

I am going to demonstrate that the extension is already capable of creating that without the need of more ‘library tweaking’.

HTML and Styling

First of all we are going to write the CSS and the HTML that will ‘mimic’ the example provided in the previous link. As you are going to see, there is also a JavaScript helper function that will handle the creation of LI elements (as in the example).

<style>
#sideContainer {
    list-style-type: none;
    padding: 0;
    margin: 0 10px 0 0;
    float: left;
    border: 1px solid #676767;
    background-color: #eee;
    overflow: auto;
  }
  #sideContainer li {
    font-size: 0.9em;
    border-bottom: 1px solid #aaa;
    padding: 5px;
  }
  #mapContainer {
    float: left;
    width: 500px;
    height: 400px;
  }
 </style>
</head>
<script>
// global marker counter
var n = 1;
function generateListElement( marker ){
    var ul = document.getElementById('sideContainer');
    var li = document.createElement('li');
    var aSel = document.createElement('a');
    aSel.href = 'javascript:void(0);';
    aSel.innerHTML = 'Open Marker #' + n++;
    aSel.onclick = function(){ google.maps.event.trigger(marker, 'click')};
    li.appendChild(aSel);
    ul.appendChild(li);
}
</script>
<body>
<!-- the side menu container -->
<ul id="sideContainer" style></ul>
<!-- we are going to render the map here -->
<div id="mapContainer"></div>

Creating the Map

For the sake of this example, we are going to create just one EGMapInfoWindow object and two markers. The most important thing is to demonstrate how to use callbackTriggers with EGMap 2.0. As you will now see, it is pretty easy to do.

// array holding a reference to all the markers
// that will be rendered to the Map
$markers = array();
$gMap = new EGMap();
$gMap->zoom = 10;
$gMap->setCenter('39.721089311812094', '2.91165944519042');
// Create GMapInfoWindow
$info_window_b = new EGMapInfoWindow('Hey! I am a marker with label!');
// Create 1st marker
$marker = new EGMapMarker(39.721089311812094, 2.91165944519042, array('title' => 'Marker With Label'));
// attach info window
$marker->addHtmlInfoWindow($info_window_b);
// add to map
$gMap->addMarker($marker);
// add to array
$markers[] = $marker;
// repeat process with second
$marker = new EGMapMarker(39.721089311812094, 2.81165944519042, array('title' => 'Marker With Label'));
$marker->addHtmlInfoWindow($info_window_b);
$gMap->addMarker($marker);
$markers[] = $marker;
// tell the map we want to render it
// to a specific layer
$gMap->appendMapTo('#mapContainer');
// initialize the afterInit array that
// will hold after map initialization
// script code
$afterInit = array();
//
// loop through markers and
// call global function to generate
// the element that will hold the
// callback trigger event
foreach($markers as $marker){
	$afterInit[] = 'generateListElement('.$marker->getJsName().');'.PHP_EOL;
}
// now render map and pass the afterInit code
$gMap->renderMap($afterInit);

Final Words

The above code is very simplistic, if we were to render lots of markers to the map, a better approach would be to make that on a loop and even more, create a couple of functions to simplify the creation of the markers.

Hope this example helps you guys to better understand the flexibility of this extension. Thanks all for using it.

Tweet this!

Styling, Javascript and HTML

First of all, we are going to write the HTML that will work with this example, it won’t styled as the example picture displayed, which is the tool I created for a project I am working now, but don’t you worry as this article will provide you with the scripts and routines to create your own.

Write the following style on the HEAD section of your HTML page:

<style>
  div#map {
    position: relative;
  }
  div#crosshair {
    position: absolute;
/*
     the top will be half of the width of the map
     less 50% of its size more or less
     to center the image correctly on the map
*/
    top: 192px;
    height: 19px;
    width: 19px;
    left: 50%;
    margin-left: -8px;
    display: block;
/* we are going to borrow a crosshair gif from google */
    background: url(http://gmaps-samples-v3.googlecode.com/svn/trunk/geocoder/crosshair.gif);
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

Now, some Javascript functions that will allow us to get the information from the map

<script type="text/javascript">
  //
  // function to get the latitude and longitude
  // and place them on the test fields
  function setLatLngToClass(){
	if(document.getElementById('test_latitude'))
	 	document.getElementById('test_latitude').value = map.getCenter().lat();
	if(document.getElementById('test_longitude'))
		document.getElementById('test_longitude').value = map.getCenter().lng();
  }
  //
  // function to get Centered Latitude and Longitude points
  function getCenterLatLngText() {
    return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
  }
  //
  // function to call when the center of the map
  // has changed. Center information will be
  // collected and displayed on the document
  // elements
  function centerChanged() {
    centerChangedLast = new Date();
    var latlng = getCenterLatLngText();
    document.getElementById('latlng').innerHTML = latlng;
    document.getElementById('formatedAddress').innerHTML = '';
    currentReverseGeocodeResponse = null;
  }
  //
  // Collects reverse center location
  function reverseGeocode() {
    reverseGeocodedLast = new Date();
    geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
  }
  //
  // Displays collected reverse geocoded results
  // and displays them on document elements
  function reverseGeocodeResult(results, status) {
    currentReverseGeocodeResponse = results;
    if(status == 'OK') {
      if(results.length == 0) {
        document.getElementById('formatedAddress').innerHTML = 'None';
      } else {
        document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
      }
    } else {
      document.getElementById('formatedAddress').innerHTML = 'Error';
    }
  }
  //
  // geocodes the address inserted
  function geocode() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
      'address': address,
      'partialmatch': true}, geocodeResult);
  }
  function geocodeResult(results, status) {
    if (status == 'OK' && results.length > 0) {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  }
 //
 // adds marker to the center of the map
  function addMarkerAtCenter() {
    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map
    });
    var text = 'Lat/Lng: ' + getCenterLatLngText();
    if(currentReverseGeocodeResponse) {
      var addr = '';
      if(currentReverseGeocodeResponse.size == 0) {
        addr = 'None';
      } else {
        addr = currentReverseGeocodeResponse[0].formatted_address;
      }
      text = text + '<br>' + 'address: <br>' + addr;
    }
    var infowindow = new google.maps.InfoWindow({ content: text });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
</script>

Our HTML on this example will be the following one:

<body style="background:white">
<div class="form">
Find by address:
 <input type="text" id="address" style="width:300px"/>
 <button type="button" class="small"onclick="geocode()">Go to Address</button>
  <ul>
     <li>Lat/Lng:&nbsp;<span id="latlng"></span></li>
     <li>Address:&nbsp;<span id="formatedAddress"></span></li>
     <li>Zoom Level:&nbsp;<span id="zoom_level"><?php echo $zoom;?></span></li>
 </ul>
</div>
<div id="map">
    <div id="map_canvas" style="width:100%; height:400px"></div>
    <div id="crosshair"></div>
</div>
<div style="overflow:hidden;width:100%;text-align:right">
<button type="button" class="small" onclick="setLatLngToClass()">Set Latitude & Longitude</button>
<button type="button" class="small" onclick="addMarkerAtCenter()">Add Marker at Center</button>
</div>
<hr>
Latitude: <input id="test_latitude" value=""/> Longitude: <input id="test_longitude" value=""/>
</hr>
</body>

Using EGMap 2.0 Extension

Finally, we are going to use EGMap 2.0 extension to automate the rest of the tasks to render our map.

Yii::import('ext.gmaps.*');
// center the map
// wherever you want
$latitude = 39.72098197183251;
$longitude = 2.9115524999999964;
$zoom = 8;
$gMap = new EGMap();
$gMap->setJsName('map');
$gMap->width = '100%';
$gMap->height = '400';
$gMap->setCenter($latitude, $longitude);
$gMap->zoom = 8;
$gMap->addGlobalVariable('geocoder');
$gMap->addGlobalVariable('centerChangedLast');
$gMap->addGlobalVariable('reverseGeocodedLast');
$gMap->addGlobalVariable('currentReversGeocodeResponse');
$gMap->addEvent(
     new EGMapEvent(
             'zoom_changed',
             'document.getElementById("zoom_level").innerHTML = map.getZoom();'));
$gMap->addEvent(new EGMapEvent('center_changed','centerChanged',false));
$gEvent = new EGMapEvent('dblclick','map.setZoom(map.getZoom() +1)');
$gMap->appendMapTo('#map_canvas');
$gMap->renderMap(array(
    'geocoder = new google.maps.Geocoder();',
    $gEvent->getDomEventJs('crosshair'),
    'reverseGeocodedLast= new Date();',
    'centerChagedLast = new Date();',
    'setInterval(function(){
        if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
        if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
          reverseGeocode();
      }
    },1000);',
    'centerChanged();'
));

Important

If you are going to run this example, please be aware that in order to display it properly in a controller, all of the above have to be the content of a layout, otherwise, if you are using renderPartial (that you can), make sure you force to true the parameter ‘processOutput’ of the mentioned function (ie $this->renderPartial(‘view’,null,false,true) )

Tweet this!

Introduction

Required for one of my projects, I decided to develop my own Yii extension to create RSS Feeds. I knew there is already one but I wanted something easier to use than that. This is why I came up with EFeed Extension. This extension supports RSS 1.0, RSS 2.0, and ATOM 1.0 standards.

How to Use

I assume that you have downloaded the extension and place it on your protected/extensions folder.

RSS 1.0 Example

Yii::import('ext.feed.*');
// specify feed type
$feed = new EFeed(EFeed::RSS1);
$feed->title = 'Testing the RSS 1 EFeed class';
$feed->link = 'http://www.ramirezcobos.com';
$feed->description = 'This is test of creating a RSS 1.0 feed by Universal Feed Writer';
$feed->RSS1ChannelAbout = 'http://www.ramirezcobos.com/about';
// create our item
$item = $feed->createNewItem();
$item->title = 'The first feed';
$item->link = 'http://www.yiiframework.com';
$item->date = time();
$item->description = 'Amaz-ii-ng <b>Yii Framework</b>';
$item->addTag('dc:subject', 'Subject Testing');
 // add it to the feed
$feed->addItem($item);
$feed->generateFeed();

As you can see in the example above, we just need to create items and add them to the feed. The example could be easily modified to add items extracted from a database and add them to the Feed in a loop.

RSS 2.0 Example

Yii::import('ext.feed.*');
// RSS 2.0 is the default type
$feed = new EFeed();
$feed->title= 'Testing RSS 2.0 EFeed class';
$feed->description = 'This is test of creating a RSS 2.0 Feed';
$feed->setImage(
'Testing the EFeed class',
'http://www.ramirezcobos.com',
'http://www.yiiframework.com/forum/uploads/profile/photo-7106.jpg');
$feed->addChannelTag('language', 'en-us');
$feed->addChannelTag('pubDate', date(DATE_RSS, time()));
$item = $feed->createNewItem();
$item->title = "first Feed";
$item->link = "http://www.yahoo.com";
$item->date = time();
$item->description = 'This is test of adding ' .
          'CDATA Encoded description <b>EFeed Extension</b>';
// this is just a test!!
$item->setEncloser(
      'http://www.tester.com',
     '1283629', 'audio/mpeg');
$item->addTag(
     'author',
     'thisisnot@myemail.com (Antonio Ramirez)');
$item->addTag(
     'guid',
     'http://www.ramirezcobos.com',
     array('isPermaLink'=>'true'));
$feed->addItem($item);
$feed->generateFeed();

ATOM 1.0 Example

Yii::import('ext.feed.*');
$feed = new EFeed(EFeed::ATOM);
// IMPORTANT : No need to add id for feed or channel.
// It will be automatically created from link.
$feed->title = 'Testing the ATOM RSS EFeed class';
$feed->link = 'http://www.ramirezcobos.com';
$feed->addChannelTag('updated', date(DATE_ATOM, time()));
$feed->addChannelTag('author', array('name'=>'Antonio Ramirez Cobos'));
$item = $feed->createNewItem();
$item->title = 'The first Feed';
$item->link  = 'http://www.ramirezcobos.com';
// we can also insert well formatted date strings
$item->date ='2010/24/12';
$item->description = 'Test of CDATA Encoded description <b>EFeed Extension</b>';
$feed->addItem($item);
$feed->generateFeed();

Download

To download the extension go to Yii’s extension repository. Hope this little piece of code can help your project needs somehow.

Tweet this!

Introduction

I had to develop a Google maps extension for my current personal project and I did some research in order not to re-invent the wheel.

The best of them all was a Symphony plugin developed by Fabrice Bernhard. I didn’t want to create a wrapper so I decided to modify its code -in some cases rewriting the whole class, in order to create a full Extension built with Yii.

The features of this extension are very large to explain, therefore I will concentrate my next posts to fully explain by example the wonders of this extension.

Requirements

Developed with latest stable version of Yii (1.5)

Usage

Unzip its contents and place the gmaps folder into your protected/extensions folder.

A Reallly Easy Example

Displaying a Marker with an Info window.

Note: This example was written in a view file.

    // import the library
    Yii::import('ext.gmaps.*');
    $gMap = new EGMap();
    $gMap->setZoom(13);
    $gMap->setCenter(39.721089311812094, 2.91165944519042);
    // Create GMapInfoWindow
    $info_window = new EGMapInfoWindow('<div>I was living here as a kid!</div>');
    // Create marker
    $marker = new EGMapMarker(39.721089311812094, 2.91165944519042, array('title' => '"My Town"'));
    $marker->addHtmlInfoWindow($info_window);
    $gMap->addMarker($marker);
    $gMap->renderMap();

Result

Resources

Download the Extension
Bug Reports & Positive Feedback

Tweet this!

Introducing jqPrettyPhoto

This extension is making use of the grrrreat jQuery plugin called PrettyPhoto. Here is its description in detail:

rettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes. It’s a full blown media lightbox.

It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6.

It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!

How to Install

Unzip the contents of the downloaded package below and copy its contents into your application’s protected/extensions folder.

How to Use

Once we have move the contents of the zipped file into the extensions folder we are ready to go. Use it at your own will into your views like this:

</p>
Yii::import('ext.jqPrettyPhoto');
jqPrettyPhoto::addPretty('.gallery a',jqPrettyPhoto::PRETTY_GALLERY,jqPrettyPhoto::THEME_FACEBOOK);

Wow! That was easy! Please allow me to explain the addPretty function. It comes with three parameters:

1) element/s selector: the JQUERY SELECTOR to the links you want to set pretty photo to. In the example above I had the following on the view’s HTML:

</p>
<p><div class="gallery"><br />
 <a href="URL_TO_IMAGE_TO_OPEN"><img src="URL_TO_IMAGE_TO_SHOW"/></a><br />

2) The second parameter is of the value jqPrettyPhoto::PRETTY_GALLERY or jqPrettyPhoto::PRETTY_SINGLE, which tells the extension whether the selector will be a list of a gallery images or just a single file.

3) The third one is what theme to use -please refer to jqPrettyPhoto.php’s code to see more options on this one.

Download

** If you have problems please use this link.

download: jqPrettyPhoto Yii Extension (72.29KB) added: 21/10/2010 clicks: 1267

Tweet this!

It is quite good and has an excellent design; also, you can create recurring invoices and keep track of the payments from the control panel.

Tweet this!

A CSS framework for cross-device layouts

Everyone writes CSS differently. Less Framework takes this into account by having a minimal set of features, and does away with things like predefined classes.

No more 960 px

Less Framework uses inline CSS3 media-queries to switch between three layouts:

• a two-column layout at 320 px, for smartphones
• a five-column layout at 768 px, for iPads and netbooks
• and an eight-column layout at 1280 px, for desktops and laptops.

No hacks, unless you want them

Less Framework works beautifully in Firefox, Chrome, Safari, Opera, IE9 (hopefully), Android phones, and all iOS devices (that’s all iPhones, iPads, and iPod Touches). It even behaves nicely in landscape mode.

Tweet this!]]> http://www.ramirezcobos.com/2010/09/12/less-framework-2/feed/ 0 http://www.ramirezcobos.com/2010/06/19/yii-framework-final-decision/ http://www.ramirezcobos.com/2010/06/19/yii-framework-final-decision/#comments Sat, 19 Jun 2010 18:43:51 +0000 Antonio Ramirez http://www.ramirezcobos.com/?p=481 I never felt comfortable with external libraries, those created by other people. Always, since my old times with Visual Basic, have created my own and until now, everything I created was good enough but… Suddenly, after I found that marvellous library called RedBean, I found my self re-programming all my libraries and end up creating a controller and a base model class for a sort of MVC library – I will post it one of these days so you guys can look at it and find out how easy is to implement that incredible library is (thanks Gabor de Mooij!) on your libraries.

But, as a programmer, I started to think that, even though my own libraries speed up my development processes, I want it to be hands on a bigger and more ambitious projects -that happened long time a go but never felt impressed by any library out there. My libraries lacked on scalable development architecture and had to find for a better solution for a much bigger project I am jumping right now. I google around and found interesting offers as exposed on one of my old posts:

• CodeIgniter
• Yii
• CakePHP
• Zend
• Symfony
• PHPDevShell
• Prado
• Akelos
• ZooP
• QPHP
• ezComponents
• DooPHP

Actually, far too many, so I took my time to decide for one to suit all my needs. Checked around and read some good articles about Yii framework and then, telling the truth, I was very impressed with (information taken from http://programmersnotes.info:

• 100% OO architecture. It is really good application design.
• Authentication & roles mechanism
• Caching techniques
• DB access, which is based on PDO
• Active record and relational active record implementation
• Validation – that is really, really nice. To create quite complex register form (check if login is unique, if email is unique, email match with confirmation, passwords match, validate integer/string values, check empty fields and give nice error messages for each field you need only template (view) and model with rules defined. It took me 10-15 mins to do that!)
• Component concept. Just to give an idea, why is it nice – you can define getter and setter methods for properties, you can define read-only properties for components, define and invoke events, attach event handlers and additional features to the class without modifying it, just by attaching additional behaviour to it
• Also, check its graphical benchmarking against other MVC frameworks http://www.yiiframework.com/performance.

Wondering whether DooPHP (claiming is the fastest at the moment) or Yii, I finally decided to use the latest due that DooPHP is quite new and Yii has a huge amount of features and tweaks that, even its documentation is not the best (I just read their Definitive Guide and I think I will have to read to a couple of hundreds articles more to be ‘good’ at it), I think at the end will become the Toolset for highly scalable projects -using its automation tool called Gii, I did the skeleton of a project in less than 30 seconds -duh!.

In addition. last but not least, you can integrate Zend components easily and jQuery is nativelly implemented -and I loooooove jQuery.

For the small ones I still like my own libraries though

Tweet this!