IPhone Compatible Sweetcron Theme

If you ever wanted to create a sweetcron theme that can be viewed in both computer browser and iphone browser differently, this some tips for you.

Viewport Meta Meta tag

The viewport meta tag enable the web developer to set the initial scale, minimum scale and maximum scale of the web page. The user-scalable parameter in the meta tag can be used to turn user scaling on/off

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;” />

the viewport meta tag shown above set the content width to device width, its initial scale, minimum scale and maximum scale to 1.0 (original scale) and turn off the user scaling. The meta tag can be added inside the html header of the page.

Conditional CSS

You can use conditional CSS to create different layouts for specific platforms and mobile devices. Using CSS3 media queries, you can add iPhone-specific style sheets to your webpage without affecting how your webpages are rendered on other platforms.

CSS3 recognizes several media types, including print, handheld, and screen. iPhone ignores print and handheld media queries because these types do not supply high-end web content. Therefore, use the screen media type query for iPhone.

To specify a style sheet that is just for iPhone without affecting other devices, use the only keyword in combination with the screen keyword in your HTML file. Older browsers ignore the only keyword and won’t read your iPhone style sheet. Use device-width, max-device-width, and min-device-width to describe the screen size.

For example, to specify a style sheet for iPhone, use the following expression:

<link media=”only screen and (max-device-width: 480px)” href=”small-device.css” type= “text/css” rel=”stylesheet“>

to specify a style sheet for devices other than iphone, use the following expression:

<link media=”screen and (min-device-width: 481px)” href=”not-small-device.css” type=”text/css” rel=”stylesheet“>

User Agent String

Different browser will have different user agent string. The user agent string will be stored inside the variable $_SERVER['HTTP_USER_AGENT']. Shown below are the user agent string for IPhone and IPod Touch:

IPhone:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/XXXXX Safari/525.20

IPod Touch:

Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

We can utilize the user agent string to output different html for the IPhone/IPod Touch browser. For example, I changed the content of sweetcron _header.php to have only this line:

<?php if (stristr($_SERVER['HTTP_USER_AGENT'], “iPhone“)){

$this->load->view(‘themes/‘.$this->config->item(‘theme‘).’/_header-iphone‘)

}else{

$this->load->view(‘themes/‘.$this->config->item(‘theme‘).’/_header-normal‘)

} ?>

The above line of code signify that, If the webpage is viewed from iphone the header file that will be used is _header-iphone.php, else, _header-normal.php will be used. The same method can be applied to the items.php, _footer.php and single.php.

Javascript

We can use javascript to change the html view when the iphone orientation is changing:

function updateOrientation(){

var orientation=window.orientation

switch(orientation){

case 0:

//potrait mode
break;

case 90:

//landscape left mode

break;

case -90:

//landscape right mode
break;

}

}
// execute the updateOrientation function when iPhone switches between portrait and landscape modes.
window.onorientationchange=updateOrientation;

IPhone Integration

The major problem when we want to view sweetcron page inside the IPhone is, IPhone cannot show the youtube video. So, in order to solve that problem, we can use IPhone integration. We can integrate the youtube link with the IPhone’s internal youtube viewer. Instead of showing the video inside the web page, we just show the button that links to the youtube video. using the sweetcron syntax:

$item->get_original_permalink()

When viewer click on the button/link, the IPhone’s internal youtube viewer will automatically opened.

IPhone/IPod Touch Scaling:

Lastly, we must also know the scaling of the IPhone/IPod Touch screen to design a web page compatible for them. The picture below shows the potrait and landscape scaling.

IPhone potrait measurement

IPhone landscape measurement

picture source: http://developer.apple.com/webapps/

That’s all for now. If you want to view the IPhone compatible sweeetcron theme in action, have a look at http://brainstorm.pro/. Try to view it from both the IPhone and Computer browser.

Firstly, download the tinyMCE package from here.

After finished downloading the package, put the extract jscript folder from the package into the folder

sweetcron/system/application/views/admin/

In order to enable the WYSIWYG feature into the blog post editor, we need to add some code in the file:

sweetcron/system/application/views/admin/write.php

just add this script before the form.

what the code does is initializing the tinyMCE instance with specified mode, theme and plugins. You can modify the arrangement of the tinyMCE toolbar button as you like by modifying the code. for more information on the tinyMCE  go to the tinyMCE homepage:

http://tinymce.moxiecode.com/

Easy right? enjoy!!

preview:

Some of the changes made are:-

• multiple user feature
• twitter plugin also modified to ensure replies between users on the multiple user group is published.
• fixed bugs on blog post pagination (blog posts only show 1 page in the original sweetcron).
• fixed bugs on deleted feeds. (deleted feeds is still displayed in the original sweetcron)
• added tinyMCE WYSIWYG on WRITE. (So user can add more style on blog post).
• added new option: latest blog post limit
• still can be used as single user.

You can download the source file here.

This is only a beta release. So, if there is any comment or suggestion just tell me.

btw, thank you Yong Fook for releasing such a great application!!

Preview:

Model

Location: sweetcron/system/application/models

Firstly, we need to add a new model which is the user_model. This model will be used to access the users table from the database. Like all other models, this model must also inherits from the Model class. The function that we will write in this model are:

1. __construct() //class’ constructor
2. _process($users) //for final processing of the database result
3. get_all_users() //return all existing user
4. add_user($user) //add a new user
5. delete_user($user_name) //delete user

After that, we need to modify the feed_model to add a relationship between feeds table and users table. In order to do that, we must join the query result in the accessor functions get_feeds() and get_active_feeds() with the users table. The modified functions should look like as shown below:

function get_feeds()
{

return $this->_process($this->db

->join(‘users‘, ‘users.ID = feeds.feed_user_id‘, ‘left outer‘)

->result());

}

function get_active_feeds($group = FALSE)
{

if ($group) {

return $this->_process($this->db

->join(‘users‘, ‘users.user_id = feeds.feed_user_id‘, ‘left outer‘)
->group_by(‘feed_domain‘)
->get_where(‘feeds‘, array(‘feed_status‘ => ‘active‘))
->result());

} else {

return $this->_process($this->db

->join(‘users‘, ‘users. user_id = feeds.feed_user_id‘, ‘left outer‘)
->get_where(‘feeds‘, array(‘feed_status‘ => ‘active‘))
->result());

}

}

The last model to be modified is the item_model. In this model, we also have to join the query results in all of its accessor functions (get…()) with the users table. Other than that, we must add 3 new attributes in Sweetcron_Item object declared in the _process($items, $return_single = FALSE) function inside the for loop. The attributes are as shown below:

$new_item->feed_user_id = $items[$key]->feed_user_id;
$new_item->feed_user_name = $items[$key]->user_login;
$new_item->feed_user_avatar = $items[$key]->user_avatar;

In order to enable viewers to view the feeds for a specific user, we must also add the 2 functions shown below inside the item_model

function count_items_by_feed_user($feed_user, $public = FALSE){

if ($public) {

$where = array(‘item_status‘ => ‘publish‘, ‘user_login‘ => $feed_user,’feed_status’ => ‘active‘);

} else {

$where = array(‘item_status !=‘ => ‘deleted‘, ‘user_login‘ => $feed_user,’feed_status‘ => ‘active‘);

}

return $this->db->select(‘ID‘)
->join(‘feeds‘, ‘feeds.feed_id = items.item_feed_id‘, ‘left outer‘)
->join(‘users‘, ‘users.ID = feeds.feed_user_id‘, ‘left outer‘)
->get_where(‘items‘, $where)
->num_rows();

}

function get_items_by_feed_user($offset = 0, $limit = 10, $feed_user, $public = FALSE){

if ($public) {

$where = array(‘item_status‘ => ‘publish‘, ‘user_login‘ => $feed_user, ‘feed_status‘ => ‘active‘);

} else {

$where = array(‘item_status !=‘ => ‘deleted‘, ‘user_login‘ => $feed_user, ‘feed_status‘ => ‘active‘);

}
$items = $this->db->limit($limit)
->offset($offset)
->join(‘feeds‘, ‘feeds.feed_id = items.item_feed_id‘, ‘left outer‘)
->join(‘users‘, ‘users.ID = feeds.feed_user_id‘, ‘left outer‘)
->order_by(‘item_date‘, ‘DESC‘)
->get_where(‘items‘, $where)
->result();

return $this->_process($items);

}

You can download the source code for all the added and modified model here.

Lastly, we needs to register the newly added user_model into SweetCron. In order to do that, we must add the code shown below into the file ‘sweetcron/system/application/libraries/MY_Controller.php’

$this->load->model(‘user_model‘);

That’s all for now. Next time I will teach you how to modify the third element, which is the controller. If you want to view the final product of multiple user sweetcron go to http://www.brainstorm.pro/lifestream/

In order to enable the multiple user feature in sweetcron, we must modify 4 elements in sweetcron which is database, model, view, and controller. In this post, I will only teach you how to modify the first elements which is the sweetcron’s database.

Database

Firstly, we must add 2 more columns on the users table. One column to define the user type (admin or feed only) and another column to define the user avatar. Also, the ID column in users table needs to be renamed as user_id to avoid conflict with the ID column in items table when we join them. The altered users table should have all the column listed below.

users
user_id – bigint(20)   //primary key (column name edited)
user_login – varchar(60)
user_pass – varchar(64)
user_email – varchar(100)
user_activation_key – varchar(60)
user_type – varchar(20)  //added column
user_avatar – varchar(50)  //added column

lastly, we must also create a relationship between the feeds table and users table. In order to do that, we must add one more column in the feeds table to store the foreign key of users table. The altered feeds table should have all the column listed below.

feeds
feed_id – int(11)
feed_title – text
feed_icon – varchar(255)
feed_url – text
feed_data – longtext
feed_status – varchar(20)
feed_domain – varchar(255)
feed_user_id – bigint(20)  //added column

That’s all for now. Next time I will teach you how to modify the second element, which is the model. If you want to view the final product of multiple user sweetcron go to http://www.brainstorm.pro/lifestream/

As an example, I wanted to add a new option to limit the no of latest blog post shown on the sweetcron page. So, I added a row with the following parameter:

1. option_name=’latest_post_limit’
2. option_value=10
3. autoload=YES

After added the row on the database, we also needs to add some code in sweetcron.

As we already know, sweetcron is an application that uses the CodeIgniter framework which uses the concept of Model-View-Controller (MVC). So, in order to modify the sweetcron source code, we need to modify the controller and view of the option inside the admin folder. We do not need to modify the option model because, we did not modify the option table structure.

View

Location: sweetcron/system/application/views/admin/options.php

For the option view, we must add one more field inside the option’s form, where we want to input the option that we have added on the database. in my case, I added this code:

<p>
<label class=”title” for=”items_per_page_input”>Latest Item Limit</label>
<span class=”option_container”>
<span class=”option”><input id=”latest_post_limit_input” type=”text” name=”latest_post_limit” value=”<?php echo $this->config->item(‘latest_post_limit’)?>” size=”5″ /></span>
</span>
</p>

make sure the name of the field is the same with the option_name value, in my case, ‘latest_post_limit‘. Other than that, in order to make current option displayed when the option page is loaded, I also added a php line on the field’s value:

echo $this->config->item(‘latest_post_limit‘)

this line will  output the value of the specified option_name.

Controller

Location: sweetcron/system/application/controllers/admin/options.php

As For the Option Controller, we need to add a few more lines of code to make sure it will validate the input and save the option value into the database. In my case, I added the following code

if ($_POST) {

$this->load->library(‘validation‘);
//…………… other codes………….

$fields['latest_post_limit] = ‘Latest Post Limit‘;  //added code

$this->validation->set_fields($fields);
//…………… other codes………….

$rules['latest_post_limit']    = “numeric“; //added code

the key added for the array $fields and $rules must also be the same with the option_name.

After finished all the steps above, we have successfully added new option in Sweetcron. In order to acccess the newly created option, use the function

$this->config->item(‘option_name‘)

enjoy!!

Screenshot:

SweetCron With Latest Item Display Limit Option

]]> http://codegenius.wordpress.com/2008/12/31/adding-new-option-in-sweetcron/feed/ 0 Otai SweetCron With Latest Item Display Limit Option