Gitiles
Code Review Sign In
www.giggi.me / code-igniter-v3-giggi / 325197e700564f8e4e0ba7c9fc82abfd85f451b0 / . / user_guide / helpers / smiley_helper.html
blob: 36ea2621634b7aa8a2c639296ca9ef3690fee57e [file] [log] [blame]
admina21c4ef2006-10-28 18:36:49 +0000[diff] [blame]1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html>
3<head>
4
5<title>Code Igniter User Guide</title>
6
7<style type='text/css' media='all'>@import url('../userguide.css');</style>
8<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />
9
10<script type="text/javascript" src="../nav/nav.js"></script>
11<script type="text/javascript" src="../nav/prototype.lite.js"></script>
12<script type="text/javascript" src="../nav/moo.fx.js"></script>
13<script type="text/javascript">
14window.onload = function() {
15 myHeight = new fx.Height('nav', {duration: 400});
16 myHeight.hide();
17}
18</script>
19
20<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
21<meta http-equiv='expires' content='-1' />
22<meta http-equiv= 'pragma' content='no-cache' />
23<meta name='robots' content='all' />
24<meta name='author' content='Rick Ellis' />
25<meta name='description' content='Code Igniter User Guide' />
26
27</head>
28<body>
29
30<!-- START NAVIGATION -->
31<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
32<div id="nav2"><a name="top"></a><a href="javascript:void(0);" onclick="myHeight.toggle();"><img src="../images/nav_toggle.jpg" width="153" height="44" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
33<div id="masthead">
34<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
35<tr>
36<td><h1>Code Igniter User Guide Version 1.5.0</h1></td>
adminc0d5d522006-10-30 19:40:35 +0000[diff] [blame]37<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
admina21c4ef2006-10-28 18:36:49 +0000[diff] [blame]38</tr>
39</table>
40</div>
41<!-- END NAVIGATION -->
42
43
44<!-- START BREADCRUMB -->
45<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
46<tr>
47<td id="breadcrumb">
48<a href="http://www.codeigniter.com/">Code Igniter Home</a> &nbsp;&#8250;&nbsp;
49<a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
50Smiley Helper
51</td>
52<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="www.codeigniter.com/user_guide/" />Search User Guide&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
53</tr>
54</table>
55<!-- END BREADCRUMB -->
56
57<br clear="all" />
58
59
60<!-- START CONTENT -->
61<div id="content">
62
63
64<h1>Smiley Helper</h1>
65
66<p>The Smiley Helper file contains functions that let you manage smileys (emoticons).</p>
67
68
69<h2>Loading this Helper</h2>
70
71<p>This helper is loaded using the following code:</p>
72<code>$this->load->helper('smiley');</code>
73
74<h2>Overview</h2>
75
76<p>The Smiley helper has a renderer that takes plain text simileys, like <dfn>:-)</dfn> and turns
77them into a image representation, like <img src="../images/smile.gif" width="19" height="19" border="0" alt="smile!" /></p>
78
79<p>It also lets you display a set of smiley images that when clicked will be inserted into a form field.
80For example, if you have a blog that allows user commenting you can show the smileys next to the comment form.
81Your users can click a desired smiley and with the help of some JavaScript it will be placed into the form field.</p>
82
83
84
85<h2>Clickable Smileys Tutorial</h2>
86
Rick Ellis325197e2006-11-20 17:29:05 +0000[diff] [blame^]87<p>Here is an example demonstrating how you might create a set of clickable smileys next to a form field. This example
admina21c4ef2006-10-28 18:36:49 +0000[diff] [blame]88requires that you first download and install the smiley images, then create a controller and the View as described.</p>
89
90<p class="important"><strong>Important:</strong> Before you begin, please <a href="http://www.codeigniter.com/downloads/smileys.zip">download the smiley images</a> and put them in
91a publicly accessible place on your server. This helper also assumes you have the smiley replacement array located at
92<dfn>application/config/smileys.php</dfn></p>
93
94
95<h3>The Controller</h3>
96
97<p>In your <dfn>application/controllers/</dfn> folder, create a file called <kbd>smileys.php</kbd> and place the code below in it.</p>
98
99<p><strong>Important:</strong> Change the URL in the <dfn>get_clickable_smileys()</dfn> function below so that it points to
100your <dfn>smiley</dfn> folder.</p>
101
102<p>You'll notice that in addition to the smiley helper we are using the <a href="../libraries/table.html">Table Class</a>.</p>
103
104<textarea class="textarea" style="width:100%" cols="50" rows="25">
105<?php
106
107class Smileys extends Controller {
108
109 function Smileys()
110 {
111 parent::Controller();
112 }
113
114 function index()
115 {
116 $this->load->helper('smiley');
117 $this->load->library('table');
118
119 $image_array = get_clickable_smileys('http://www.your-site.com/images/smileys/');
120
121 $col_array = $this->table->make_columns($image_array, 8);
122
123 $data['smiley_table'] = $this->table->generate($col_array);
124
125 $this->load->view('smiley_view', $data);
126 }
127
128}
129</textarea>
130
131<p>In your <dfn>application/views/</dfn> folder, create a file called <kbd>smiley_view.php</kbd> and place this code in it:</p>
132
133
134<textarea class="textarea" style="width:100%" cols="50" rows="20">
135<html>
136<head>
137<title>Smileys</title>
138
139<?php echo js_insert_smiley('blog', 'comments'); ?>
140
141</head>
142<body>
143
144&lt;form name="blog">
145&lt;textarea name="comments" cols="40" rows="4">&lt;/textarea>
146</form>
147
148<p>Click to insert a smiley!</p>a
149
150<?php echo $smiley_table; ?>
151
152</body>
153</html>
154</textarea>
155
156
157<p>When you have created the above controller and view, load it by visiting <dfn>http://www.your=site.com/index.php/smileys/</dfn></p>
158
159<h1>Function Reference</h1>
160
161
162<h2>get_clickable_smileys()</h2>
163
164<p>Returns an array containing your smiley images wrapped in a cliackable link. You must supply the URL to your smiley folder
165via the first parameter:</p>
166
167<code>$image_array = get_clickable_smileys("http://www.your-site.com/images/smileys/");</code>
168
169
170<h2>js_insert_smiley()</h2>
171
172<p>Generates the JavaScript that allows the images to be clicked and inserted into a form field.
173The first parameter must contain the name of your form, the second parameter must contain the name of the
174form field. This function is designed to be placed into the &lt;head&gt; area of your web page.</p>
175
176<code>&lt;?php echo js_insert_smiley('blog', 'comments'); ?&gt;</code>
177
178
179<h2>parse_smileys()</h2>
180
181<p>Takes a string of text as input and replaces any contained plain text smileys into the image
182equivalent. The first parameter must contain your string, the second must contain the the URL to your smiley folder:</p>
183
184<code>
185
186$str = 'Here are some simileys: :-) ;-)';
187
188$str = parse_smileys($str, "http://www.your-site.com/images/smileys/");
189
190echo $str;
191
192</div>
193<!-- END CONTENT -->
194
195
196<div id="footer">
197<p>
198Previous Topic:&nbsp;&nbsp;<a href="html_helper.html">HTML Helper</a>
199&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
200<a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
201<a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
202Next Topic:&nbsp;&nbsp;<a href="string_helper.html">String Helper</a>
203<p>
204<p><a href="http://www.codeigniter.com">Code Igniter</a> &nbsp;&middot;&nbsp; Copyright &#169; 2006 &nbsp;&middot;&nbsp; <a href="http://www.pmachine.com">pMachine, Inc.</a></p>
205</div>
206
207</body>
208</html>