How to implement simple and easy search functionality on an index page

Here's how to implement simple and easy search functionality on an index page:

1. Let's say your controller looks like this:

public function actionIndex()
{
  $dataProvider=new CActiveDataProvider('Model');
  $this->render('index',array(
  'dataProvider'=>$dataProvider,
  ));
}

2. Change it to this:

public function actionIndex()
{
    $criteria = new CDbCriteria();

    if(isset($_GET['q']))
    {
      $q = $_GET['q'];
      $criteria->compare('attribute1', $q, true, 'OR');
      $criteria->compare('attribute2', $q, true, 'OR');
    }

    $dataProvider=new CActiveDataProvider("Model", array('criteria'=>$criteria));

    $this->render('index',array(
      'dataProvider'=>$dataProvider,
    ));
}

The above will read in the "q" (for query) parameter, and use the compare function to create the sql to search a few attributes for that value. Note the use of the 'OR' operator.

3. In your index view, add this:

<form method="get">
<input type="search" placeholder="search" name="q" value="<?=isset($_GET['q']) ? CHtml::encode($_GET['q']) : '' ; ?>" />
<input type="submit" value="search" />
</form>

The above creates a form that will submit to itself using the querystring. It displays a search input box, which is a text input box with a "cancel" command. It works in most browsers and defaults to a text field in the rest. When the user hits the search button, the form is submitted and the data is filtered by the search value.

How to hide index.php in the url in a Yii website

to hide "index.php" from the url on a website, add an .htaccess file to your web root, with this text:

Options +FollowSymLinks
IndexIgnore */*
RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# otherwise forward it to index.php
RewriteRule . index.php

and in /protected/config/main.php, set:


'urlManager'=>array(
'urlFormat'=>'path',
   'showScriptName'=>false,
   'caseSensitive'=>false,

Adventures in CSS: a seal of approval

Here's how to make a nice "seal of approval" using only cascading style sheets. This only works in REAL browsers for now (webkit/firefox), but there are other options for IE

Approved!

it should look like this image:

Here we have a simple div tag:

<div class="seal">Approved!</div>

And we apply some css styles to it:

1. to make it a circle, apply border-radius:50%;
2. to rotate the div, use -webkit-transform: rotate(20deg);
3. give the background a nice radial gradient with: -webkit-gradient(radial, 50% 0%, 1, 50% 0%, 200, from(#B00000), to(#600000));
4. give it a subtle shadow with: box-shadow: 2px 2px 2px gray;

Here's the full CSS:



.seal
{
    height:200px;
    width:200px;
    text-align:center;
    color:white;
    font-family:Trebuchet MS;
    font-size:xx-large;
    line-height:200px; /*center text vertically*/
    background-color:#600000; /*fallback for other browsers*/

    border-radius:50%;
    -moz-border-radius:50%;

    -webkit-transform:rotate(20deg);
    -moz-transform: rotate(20deg);

    background: -webkit-gradient(radial, 50% 0%, 1, 50% 0%, 200, from(#B00000), to(#600000));
    background: -moz-radial-gradient(50% 0%, cover, #B00000, #600000);

    box-shadow: 2px 2px 2px gray;
    -moz-box-shadow: 2px 2px 2px gray;
}

How to override Yii's block radio button list labels and make them inline

By default, Yii radio buttons, radiobuttonlists, and checkboxlists look dumb. The label is on a different line, which is not a great design.

Here's how to fix it:

In your form style sheet (form.css), set:

input[type=radio] + label, input[type=checkbox] + label { display:inline !important; }

that's it, you're done.

What it does is says anytime you have a radio button with a label element directly after it, make that label inline instead of block, meaning that there won't be a line break.

I would also recommend changing Yii's default checkbox label positioning to before the label. 

How to change a file extension in NetBeans

I had a .html file that I wanted to change to .php, but NetBeans doesn't let you change the extension with the Rename or Refactor menu option.

To change the file extension in NetBeans, right-click the file and choose Properties. In the Properties window, under Extension, change the value, and hit Close. 

Yii: How to set a value in the parent layout from a child view

Say you have a search box at the top of your page, but you want to make it contextual to the area that you're in. For example, on the contacts view, you want the search button to say "Search Contacts". Your search button is on the layouts/main.php page. Here's how:

open protected/components/Controller.php

add a variable, such as "searchButtonArea"

in layouts/main.php, add that value to the search buttons, such as <?="Search $this->searchButtonArea"?>

then, in your contact views, set $this->searchButtonArea = "Contacts";

Or, add a property to the ContactsController, $searchButtonArea='Contacts';

How to get debug information about your Yii application quickly

<?php

var_dump(Yii::app());

phpinfo();

?>

will tell you a lot about your current Yii app. This will show your database connection passwords, so be careful.

How to make a mobile theme in Yii

Making a mobile theme in Yii is pretty easy. Getting it running smoothly is more work. Here's how:

Making the Theme

1. under /themes/ create a folder "mobile"

2. copy main.php from /protected/views/layouts/ to the /themes/mobile/views/layouts/ folder. You don't need to copy anything else. Views, etc will be inherited.

3. The blueprint CSS framework doesn't seem to be too mobile friendly. By default, there will be a lot of horizontal scrolling. So, in /themes/mobile/views/layouts/main.php, remove these lines:

<!-- blueprint CSS framework -->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->

You can test it out by setting 'theme'=>'mobile' in /protected/config/main.php

Now, you want to detect the browser type and set the right theme (which i'll cover next), BUT you also want to give users a choice. For example, you should be able to test the mobile site on your desktop web browser, without changing the user-agent string.

* one thing you may not know is that Yii looks for the classic theme on start, which is empty. But you can put views or layouts there and they will be used without configuration change.

You can add some styling to the mobile theme to make it look better. Here are some items to consider:



<style>
    input[type=text], input[type=password], textarea {max-width:260px;}
    h1,h2,h3,h4,h5,h6 {font-weight:normal;}
    html, body, #content {margin:0; padding:0;}
    #content h1, #logo, #footer, .portlet-title {display:none;}
    #sidebar {padding:0; margin:0; margin-top:5px;}
    * {float:none; }
</style>

Wiring up the Theme

So, do this. In /protected/config/main.php, set

'onBeginRequest'=>array('MyClass', 'BeginRequest'),

in /protected/components/ create a file MyClass.php like this:

class MyClass
{
  public function BeginRequest(CEvent $event)
  {
    Yii::app()->theme = Yii::app()->session['theme'];
  }
}

This will look for a theme name in the session. If it does not exist, Yii will use no theme (it will look like it does normally).

To switch themes, make a new controller. In /protected/controllers/ create BrowserController.php, and add this text:

class BrowserController extends Controller
{
    public function actionIndex($theme)
    {
      Yii::app()->session['theme'] = $theme;
      $referrer = Yii::app()->request->urlReferrer ? Yii::app()->request->urlReferrer : "/mob"; //or whatever your website root is
        Yii::app()->request->redirect($referrer);
    }
}

The above will take a theme name as a querystring parameter and put it in session, and redirect to either the HTTP Referrer or to the root of your site. You could also look for this directly in BeginRequest

To switch to the mobile theme, go to webroot/browser/mobile and to switch back go to webroot/browser/anythingelse