codeigniter使用
CodeIgniter是一个流行的,轻量级的,开源的框架,用PHP编写,并基于模型-视图-控制器(MVC)架构模式。 jQuery是一个快速,轻量级的开源JavaScript库,旨在简化对HTML页面和Ajax交互的操作。 当一起使用时,它们为快速开发可用的网站和应用程序奠定了强大的基础。
本文介绍了如何将这两个系统集成到单个框架中,以及如何使用jQuery改进现有Web应用程序的UI。 假定您同时安装了CodeIgniter版本1.7.2或更高版本以及MySQL版本4.1或更高版本,并且您对这两者都有很好的使用知识。 另外,您需要jQuery库1.4.2或更高版本。
Web 2.0最重要的方面之一是用户的体验更像是桌面应用程序,而不是网站。 具体地说,与网页的交互不需要与Web服务器进行“可视通信”,例如,单击“提交”,等待Web服务器处理提交的信息,然后整个Web页面会更新内容。 取而代之的是,仅更新需要更改的内容,而页面的其余部分保持不变。
这种“无提交”过程通过使用Ajax来工作,它使Web开发人员可以在Web客户端(浏览器)和Web服务器之间传输信息,而无需刷新页面。 更好的是,无需任何直接用户干预即可触发此信息传输。
当网页使用Ajax时,它是向Web服务器异步发送数据和从Web服务器接收数据。 传输的数据是纯文本,因此可以采用多种不同的格式,例如XML,HTML,JSON或纯文本。
数据的实际传输是使用JavaScript和称为XMLHttpRequest
的API执行的,这是jQuery输入图片的地方。 jQuery库大大简化了使用Ajax的过程。 而且不仅使用Ajax更容易,而且显示更新的数据也更容易。 (如果您曾经尝试过使用JavaScript遍历HTML DOM,那么您将非常感激它多么简单!)
为了演示将jQuery与CodeIgniter结合使用的强大功能和简便性,本文将指导您改进现有Web应用程序的UI。 该应用程序旨在帮助教师管理课堂活动和每个家长的参与。 教师首先从董事会批准的选项列表中选择班级活动,并为每个活动安排一个日期。 然后,父母在该网站上注册并输入其子女的联系信息。 然后,他们可以查看班级活动列表并选择参与程度(购买物品,帮助准备,协助或充当活动负责人)。
注意:此系统可以轻松应用于支持儿童运动队,基督教青年会团体等。
对于本文,该应用程序的数据库已加载约100个事件,5个父母和1个老师。 父级的用户名是parent1,parent2 、。 。 。 父母5。 教师的用户名为教师,所有密码均为ibm。 您将要下载 Web应用程序和数据库,并在Web服务器上进行设置以进行后续操作。 该应用程序要求CodeIgniter框架位于服务器的根目录。
要开始使用jQuery,请先下载该库。 每个版本都提供两个文件:一个未压缩的文件和一个“最小化”文件(此高度压缩的版本加载速度更快,但如果您愿意,则无法跟踪)。 我建议使用未压缩版本进行开发,而使用压缩版本进行生产。
接下来,将jQuery库文件放在Web服务器根目录的.assets / js文件夹中。 然后,在名为global.js的同一文件夹中创建一个新文件,如清单1所示。在这里,您将放置整个应用程序JavaScript代码。
/* Global JavaScript File for working with jQuery library */
// execute when the HTML file's (document object model: DOM) has loaded
$(document).ready(function() {
alert ('Hello World');
});
对于本文(以及大多数应用程序),许多jQuery代码将驻留在$(document).ready()
函数中。 仅在HTML文件的DOM完成加载后,才自动触发此功能。
为了使应用程序加载这两个文件,请编辑./system/application/views/template.php文件,如清单2所示。
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="/assets/css/screen.css" rel="stylesheet" type="text/css" />
<!-- the following two lines load the jQuery library and JavaScript files -->
<script src="/assets/js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="/assets/js/global.js" type="text/javascript"></script>
<title><?php echo $title;?></title>
</head>
现在,导航到网站的索引页面。 页面加载后,JavaScript警报将显示“ Hello World”。
有了jQuery库和global.js文件,您就可以开始改善应用程序的界面了。 如果尚未注册,请花几分钟时间以家长和老师的身份登录,以熟悉系统中活动的工作方式。
改进UI的第一个地方是“注册”页面。 当前,在用户提交页面之后,对是否已使用用户名进行验证。 但是,使用Ajax,您可以运行服务器端验证并返回结果,而无需提交任何页面。
为此,请将代码绑定到用户onblur()
段的onblur()
事件,该事件在用户的光标离开该字段时触发。 清单3显示了更新的global.js文件。
/* Global JavaScript File for working with jQuery library */
// execute when the HTML file's (document object model: DOM) has loaded
$(document).ready(function() {
/* USERNAME VALIDATION */
// use element id=username
// bind our function to the element's onblur event
$('#username').blur(function() {
// get the value from the username field
var username = $('#username').val();
// Ajax request sent to the CodeIgniter controller "ajax" method "username_taken"
// post the username field's value
$.post('/index.php/ajax/username_taken',
{ 'username':username },
// when the Web server responds to the request
function(result) {
// clear any message that may have already been written
$('#bad_username').replaceWith('');
// if the result is TRUE write a message to the page
if (result) {
$('#username').after('<div id="bad_username" style="color:red;">' +
'<p>(That Username is already taken. Please choose another.)</p></div>');
}
}
);
});
});
此代码使用ID为username
的DOM元素创建jQuery对象。 然后,它调用jQuery blur()
方法,该方法将一个函数绑定到用户onblur()
事件。 此函数使用Ajax将用户名字段中的值发布到名为ajax
的CodeIgniter控制器及其方法username_taken
。 接下来,它清除所有现有的错误消息,并根据Ajax发布的结果显示或不显示错误消息。
接下来,在./system/application/controllers中,创建一个名为ajax.php的文件,该文件由jQuery Ajax .post()
方法引用。 清单4显示了此控制器的源代码。 (请注意,命名控制器ajax
并没有什么特别的。只要.post()
方法中的URL指向正确的控制器,就可以调用任何东西。)
<?php
class Ajax extends Controller {
public function Ajax() {
parent::Controller();
}
public function username_taken()
{
$this->load->model('MUser', '', TRUE);
$username = trim($_POST['username']);
// if the username exists return a 1 indicating true
if ($this->MUser->username_exists($username)) {
echo '1';
}
}
}
/* End of file ajax.php */
/* Location: ./system/application/controllers/ajax.php */
请注意, username_taken()
方法不会返回值。 相反,它回响了它的响应,这是重要的一点。 jQuery Ajax请求将数据发布到Web页面并使用结果页面数据。 它不是以编程方式触及方法本身。
现在,您的第一个Ajax功能已经完成。 导航到“注册”页面,并使用已经使用的任何用户名进行注册,以查看相应的错误消息。
有趣的是,编写的jQuery代码意外产生了结果。 Ajax函数绑定到ID为username
的字段,其中包括Login页面上的username字段。 清单5显示了如何修改jQuery对象,使其仅绑定到registration_form
表单内的username字段。
/* USERNAME VALIDATION */
// use element id=username within the element id=registration_form
// bind our function to the element's onblur event
$('#registration_form').find('#username').blur(function() {
UI的下一个改进是在“课堂活动列表”页面上。 为了让父母表明他或她参加特定活动,父母单击适当的单选按钮,然后单击保存链接以提交页面。 为了改善用户界面,无需单击保存链接,因此根本不需要提交页面。
首先,将以下代码添加到global.js文件中。 它分为清单6,清单7和清单8,以更轻松地描述该过程。
/* AUTOSAVE PARTICIPATION */
// use input element name=participation_type_id and type=radio
// bind our function to the element's onclick event
$('input[name=participation_type_id]:radio').click(function() {
var participation_type_id = this.value;
// create global variables for use below
var class_activity_id, user_id;
// get the form's two hidden input elements
// each is a sibling of the parent of the clicked radio button
// store their values in the global variables
var hidden_elements = $(this).parent().siblings('input:hidden');
$(hidden_elements).map(function() {
if (this.name == 'class_activity_id') {
class_activity_id = this.value;
}
if (this.name == 'user_id') {
user_id = this.value;
}
});
此函数绑定到任何名为onclick()
的单选按钮的onclick()
事件。 它获取单击的单选按钮的值。 然后,它使用一组链接方法返回隐藏的表单元素。 map()
方法通过其元素传递每个元素,以获取class_activity_id
和user_id
值。
确定了设置家长参与所需的值之后,代码将执行一个Ajax请求来保存此信息,如清单7所示。服务器对此请求的响应未回显任何数据,因此jQuery响应函数为空(并且可以实际上已被删除)。
// Ajax request to CodeIgniter controller "ajax" method "update_user_participation"
// post the user_id, class_activity_id and participation_type_id fields' values
$.post('/index.php/ajax/update_user_participation',
{ 'user_id':user_id,
'class_activity_id':class_activity_id,
'participation_type_id':participation_type_id },
// when the Web server responds to the request
function(result) { }
);
最后,使用jQuery next()
方法将单选按钮旁边的文本更改为适当的颜色,以每个字符串为目标。 清单8显示了此代码。
// set the text next to the clicked radio button to red
$(this).next().css("color", "red");
// set the text next to the remaining radio buttons to black
var other_r_buttons = $(this).siblings('input[name=participation_type_id]:radio');
$(other_r_buttons).map(function() {
$(this).next().css("color", "black");
});
});
现在已经编写了jQuery代码,您需要在ajax
控制器中创建update_user_participation()
方法,如清单9所示。
public function update_user_participation()
{
$this->load->model('MActivity', '', TRUE);
$this->MActivity->set_user_participation($_POST);
}
此方法使用MActivity模型中已经找到的set_user_participation()
方法,该方法采用Ajax请求发布的变量。
最后,注释掉./system/application/controller/activity.php中的save链接,如清单10所示。
'<span style="style="white-space: nowrap;">'.
$participation_type_buttons.' '.
/* the save link is no longer needed
'<a href="" onclick="document.forms[\'form_'.$activity->id.'\'].submit();
return false;">save</a>'. */
'</span>'.
'</form>';
现在,您可以更改家长的参与,它将自动保存,而无需刷新页面。
自动建议或自动完成功能是Ajax的最有效和广泛使用的方法之一。 以教师身份登录,然后点击管理课堂活动 。 要添加活动,用户必须向下滚动一长串可能的活动。 为了改进UI,请在./system/application/views/activity_master_listing.php文件的顶部添加一个绑定到autosuggest
功能的输入字段,如清单11所示。这样做可使教师更轻松地从所有计划外活动。
<div id="select_anchor">
<a href="" onclick="$('#select_anchor').hide(100);
$('#select_activity').show(100);
return false;">
Select an unscheduled Activity to add >></a>
<br /><br />
</div>
<div id="select_activity" class="requested_activity" style="display:none;">
<table>
<caption> Select an unscheduled Activity</caption>
<tr class="odd_row_add">
<td>
Begin by typing a few letters of an activity name<br />
then select from the resulting list<br />
<br />
<input type="text" value="" id="class_activity"
onkeyup="autosuggest(this.value);" class="autosuggest_input" />
<div class="autosuggest" id="autosuggest_list"></div>
</td>
</tr>
</table>
</div>
注意绑定到JavaScript onclick()
事件的两个jQuery对象和方法。 请记住,jQuery只是一个JavaScript库,并且可以在整个应用程序中与JavaScript无缝交互,而不仅仅是在$(document).ready()
函数中。
接下来,在global.js文件中的$(document).ready()
函数之外,实现以下JavaScript函数。 它绑定到class_activity输入字段的onkeyup()
事件。 清单12中显示了源代码。
/* AUTOSUGGEST SEARCH */
// triggered by input field onkeyup
function autosuggest(str){
// if there's no text to search, hide the list div
if (str.length == 0) {
$('#autosuggest_list').fadeOut(500);
} else {
// first show the loading animation
$('#class_activity').addClass('loading');
// Ajax request to CodeIgniter controller "ajax" method "autosuggest"
// post the str parameter value
$.post('/index.php/ajax/autosuggest',
{ 'str':str },
function(result) {
// if there is a result, fill the list div, fade it in
// then remove the loading animation
if(result) {
$('#autosuggest_list').html(result);
$('#autosuggest_list').fadeIn(500);
$('#class_activity').removeClass('loading');
}
});
}
}
请注意,尽管此函数不在$(document).ready()
函数之内,但仍使用jQuery对象和方法。 它的jQuery .post()
方法调用Ajax控制器的autosuggest()
方法,该方法回显无序的autosuggest
结果列表。 清单13显示了此代码。
public function autosuggest()
{
// escapes single and double quotes
$str = addslashes($_POST['str']);
$this->load->model('MActivity', '', TRUE);
$unscheduled_activities_qry = $this->MActivity->find_unscheduled_activities($str);
// echo a list where each li has a set_activity function bound to its onclick() event
echo '<ul>';
foreach ($unscheduled_activities_qry->result() as $activity) {
echo '<li onclick="set_activity(\''.addslashes($activity->name).'\'';
echo ', '.$activity->id.');">'.$activity->name.'</li>';
}
echo '</ul>';
}
接下来,添加find_unscheduled_activities()
方法以从数据库返回autosuggest
结果。 清单14包含来自./system/application/models/mactivity.php的代码。
// Finds all unscheduled activities that match the passed string
function find_unscheduled_activities($str)
{
$this->db->select('id, name
FROM master_activity
WHERE name LIKE \''.$str.'%\'
AND id NOT IN
(SELECT master_activity_id FROM class_activity)
ORDER BY name', FALSE);
return $this->db->get();
}
您还需要设置autosuggest <div>
和列表的样式,以使UI更加清晰,列表元素可以单击。 清单15中显示了添加到./assets/css/screen.css的样式。
/***************/
/* Autosuggest */
.autosuggest {
border:1px solid #000000;
display:none;
overflow:hidden;
padding:0px;
position:absolute;
width:200px;
z-index:1;
}
.autosuggest ul li {
background-color:#FFFFFF;
cursor:pointer;
display:block;
list-style:none;
padding:5px;
white-space:nowrap;
}
.autosuggest ul li:hover {
background-color:#316AC5;
color:#FFFFFF;
}
.loading{
background-image:url('../img/indicator.gif');
background-position:right;
background-repeat:no-repeat;
}
.autosuggest_input {
width:200px;
}
.table_header_add {
background-color:#FFCC66;
}
.odd_row_add {
background-color:#FFCC66;
}
您即将完成。 您可以在字段中键入字符以检索一组匹配的活动。 现在,实现代码以选择,显示和保存该类的活动。 首先将两个函数添加到global.js文件中,以设置活动名称字段并显示包含活动信息的行。 清单16显示了两者的源代码。
/* AUTOSUGGEST SET ACTIVITY */
// triggered by an onclick from any of the li's in the autosuggest list
// set the class_acitity field, wait and fade the autosuggest list
// then display the activity details
function set_activity(activity_name, master_activity_id) {
$('#class_activity').val(activity_name);
setTimeout("$('#autosuggest_list').fadeOut(500);", 250);
display_activity_details(master_activity_id);
}
/* AUTOSUGGEST DISPLAY ACTIVITY DETAILS */
// called by set_activity()
// get the HTML to display and display it
function display_activity_details(master_activity_id) {
// Ajax request to CodeIgniter controller "ajax" method "get_activity_html"
// post the master_class_activity parameter values
$.post('/index.php/ajax/get_activity_html',
{ 'master_activity_id':master_activity_id },
// when the Web server responds to the request
// replace the innerHTML of the select_activity element
function(result) {
$('#select_activity').html(result);
}
);
}
此代码还使用Ajax获取显示所选活动的表行。 它HTML由清单17中的代码生成。
public function get_activity_html()
{
$this->load->model('MActivity', '', TRUE);
$this->load->library('table');
$requested_activity_id = $_POST['master_activity_id'];
$requested_activity_qry =
$this->MActivity->get_requested_master_activity($requested_activity_id);
// code leveraged from /controllers/activity.php manage_class_listing() method
// generate HTML table from query results
$tmpl = array (
'table_open' => '<table>',
'heading_row_start' => '<tr class="table_header_add">',
'row_start' => '<tr class="odd_row_add">'
);
$this->table->set_template($tmpl);
$this->table->set_caption(' Add this Activity');
$this->table->set_empty(" ");
$this->table->set_heading('<span class="date_column">Date</span>',
'<span class="activity_name_column">Activity Name</span>',
'<span class="address_column">Address</span>',
'City', 'Details');
$table_row = array();
foreach ($requested_activity_qry->result() as $activity)
{
$m_id = $activity->master_activity_id;
$table_row = NULL;
$table_row[] = ''.
'<form action="" name="form_'.$m_id.'" method="post">'.
'<input type="hidden" name="master_activity_id" value="'.$m_id.'"/> '.
'<input type="text" name="activity_date" size="12" /> '.
'<input type="hidden" name="action" value="save" /> '.
'</form>'.
'<span class="help-text">format: MM-DD-YYYY</span><br/>'.
'<a href="" onclick="document.forms[\'form_'.$m_id.'\'].submit();'.
'return false;">save</a>';
$table_row[] = '<input type="text" value="'.$activity->name.
'" id="class_activity" onkeyup="autosuggest(this.value);"'.
'class="autosuggest_input" />'.
'<div class="autosuggest" id="autosuggest_list"></div>';
$table_row[] = htmlspecialchars($activity->address);
$table_row[] = htmlspecialchars($activity->city);
$table_row[] = htmlspecialchars($activity->details);
$this->table->add_row($table_row);
}
$requested_activities_table = $this->table->generate();
echo $requested_activities_table;
}
}
只需少量修改即可从活动控制器中利用此代码,包括回显最终表而不返回它。 它要求清单18中显示SQL查询来自./system/application/models/mactivity.php。
// Returns a single master activity record
public function get_requested_master_activity($id)
{
$this->db->select('id as master_activity_id, name, address, city, details');
$this->db->where('id', $id);
return $this->db->get('master_activity');
}
最后,尽管您已经可以添加新活动,但是您想要删除未计划的活动并以升序对列表进行重新排序。 清单19显示了MActivity模型中更新SQL代码。
// Retrieve all master activity records
function list_class_activities($activity_id)
{
// get all records
if (!$activity_id) {
$this->db->select('ma.id as master_activity_id, ma.name,
ma.address, ma.city,
ma.details, ca.id as class_activity_id, ca.date
FROM master_activity ma
/*LEFT*/ JOIN class_activity ca ON ca.master_activity_id = ma.id
ORDER BY ca.date /*DESC*/, ma.name', FALSE);
return $this->db->get();
// get all records except the one being requested
} else {
$this->db->select('ma.id as master_activity_id, ma.name,
ma.address, ma.city,
ma.details, ca.id as class_activity_id, ca.date
FROM (SELECT * FROM master_activity
WHERE master_activity.id != '.$activity_id.') ma
/*LEFT*/ JOIN class_activity ca ON ca.master_activity_id = ma.id
ORDER BY ca.date /*DESC*/, ma.name', FALSE);
return $this->db->get();
}
}
UI的最终改进是用可视日历替换用于输入日期的文本输入字段。 为此,请使用jQuery UI Datepicker,它是jQuery UI库(jQuery库的开源扩展)中流行的插件。 更新./system/application/views/template.php文件,如清单20所示。
<!-- including the jQuery UI Datepicker and styles -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
type="text/javascript"></script>
<link href="/assets/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* jQuery UI sizing override */
.ui-widget {font-size:1em;}
</style>
请注意, <script>
标记不是下载库,而是引用http://ajax.googleapis.com,它是许多库(例如jQuery UI)的免费存储库。 CSS文件和图像被配置为仅包含必要的样式(http://jqueryui.com/download)。 最后,在假定主体字体大小为62.5%的情况下构建jQuery UI库,因此您可以覆盖其默认值以适当地调整其大小。
Datepicker通过绑定到HTML中CSS类或ID来工作。 对于edit活动功能,在第210行附近的./system/application/controllers/activity.php中的date输入字段中分配一个名为date-picker
的类。代码如清单21所示。
// add the date-picker class to the date input field
'<input type="text" name="activity_date" size="12" value="'.
date('m/d/Y', strtotime($activity->date)).'" class="date-picker" /> '.
'<input type="hidden" name="action" value="update" /> '.
'</form>'.
'<span class="help-text">format: MM/DD/YYYY</span><br/>'.
对于添加活动功能,在第83行的./system/application/controllers/ajax.php中为date输入字段分配相同的类,如清单22所示。
// add the date-picker class to the date input field
'<input type="text" name="activity_date" size="12" class="date-picker" /> '.
'<input type="hidden" name="action" value="save" /> '.
'</form>'.
'<span class="help-text">format: MM/DD/YYYY</span><br/>'.
最后,绑定Datepicker,以便在编辑或添加班级活动时显示它。 清单23显示了位于global.js文件的$(document).ready()
函数内部的代码。
/* jQUERY UI CALENDAR PLUGIN */
// bind the Datepicker to the date-picker class
$(".date-picker").datepicker();
现在尝试编辑课堂活动。 将光标放在日期输入字段中时,将显示一个日历,您可以为该活动选择一个日期。 但是,请注意,尝试添加活动时,此方法不起作用。 这是因为添加活动HTML是在文档已加载后(使用Ajax)编写的,因此Datepicker不会绑定到其日期输入字段。 要解决此问题,请在Ajax函数编写HTML之后将Datepicker绑定到日期输入字段。 清单24显示了对global.js文件中的display_activity_details()
函数的更改。
function(result) {
$('#select_activity').html(result);
// because the add datepicker is not loaded with the DOM
// manually add it after the date input field is written
$(".date-picker").datepicker();
}
现在,您可以使用Datepicker日历添加班级活动。
在工作上表现出色! 您已经学会了通过jQuery对象组合DOM操作并通过Ajax实现无缝通信,从而显着改善了该应用程序的UI。 而且在许多情况下,执行此操作的代码非常小。 现在,您可能会面临通过进一步使用Ajax在线进行类活动编辑或实现阅读本文时可能拥有的任何其他UI想法来进一步增强应用程序的挑战。
翻译自: https://www.ibm.com/developerworks/web/library/wa-aj-codeigniter/index.html
codeigniter使用