第 1 部分：建立 SMS 訂閱表單
- 王林原創
- 2023-08-28 17:45:071015瀏覽
簡訊是一項全球性技術，幾乎每個擁有手機的人都在使用。儘管簡訊編程的覆蓋範圍比智慧型手機市場大得多，但其覆蓋範圍卻要少得多，而且往往仍然沒有資本化。在本教程中，我將向您展示如何建立允許用戶輸入手機號碼的網站註冊表單。接下來我將向您展示如何使用PHP進行伺服器端電話號碼驗證，以檢查使用者輸入的手機號碼是否確實是他的手機。在此過程中，我們將使用 jQuery 來執行客戶端驗證，並使用 CodeIgniter 作為我們的開發框架。
#第 1 步： 規劃
讓我們先概述該解決方案。用戶將存取註冊表單，選擇國家/地區，然後輸入手機號碼。提交註冊表單後，用戶需要輸入發送到所輸入手機號碼的驗證碼，才能啟動新帳戶。如果使用者在輸入驗證碼之前關閉頁面並稍後再次造訪註冊表單，則仍會顯示電話號碼表單。好的，我們開始吧！
第 2 步： 下載 CodeIgniter
從 www.codeigniter.com 下載 CodeIgniter。接下來，解壓縮該資料夾並將其複製到 Web 伺服器的 Web 根目錄（您必須有權存取可以解析 PHP 的 Web 伺服器才能完成本教學）。複製到您的網絡根目錄是可選的，但這樣做將幫助我們更好地瀏覽原始檔案。
在應用程式目錄中，導覽至 config 目錄並開啟 config.php。這是主要配置，我們需要在其中設置一些設置，如下面的程式碼所示：
$config['base_url'] = "http://localhost/sending_sms/"; ... $config['index_page'] = "index.php"; ... $config['uri_protocol'] = "AUTO";
接下來，在同一設定資料夾中開啟database.php並完成以下分配：
db['default']['hostname'] = "localhost"; $db['default']['username'] = "root"; $db['default']['password'] = "__password__"; $db['default']['database'] = "sms_users";
最後，開啟 config 資料夾中的 autoload.php，然後加入一些我們需要的函式庫和幫助程式：
$autoload['libraries'] = array('database');
...
$autoload['helper'] = array('url', 'form', 'cookie');
第 3 步： 註冊控制器
讓我們建立註冊控制器。在 application/controllers 資料夾中建立一個名為 signup.php 的文件，然後讓我們開始編寫主要註冊功能的程式碼：
class Signup extends Controller {
function Signup(){
parent::Controller();
}
function index(){
$this->load->view('signup' );
}
}
我已經建立了 Signup 類，您會注意到它與檔案具有相同的名稱，並且它擴展了 Controller。我建立了 index() 函數來處理註冊表單的顯示。我們稱之為index，因為這是使用預設url 存取時呼叫的預設函數，不帶任何段。我們也必須在config/routes.php中設定預設控制器（signup）：
$route['default_controller'] = "signup";
如果您現在測試該應用程序，您將收到一條錯誤訊息，告訴您「無法載入請求的檔案：signup.php」。這是因為我們還沒有建立註冊視圖。我們現在就開始吧。
第 4 步： 註冊檢視
在application/views資料夾中建立一個新檔案signup.php並輸入以下標記：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Signup</title>
<link rel="stylesheet" href="<?php echo base_url(); ?>css/reset.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/design.css" type="text/css" />
</head>
<body>
<div id="wrap">
<h2>Signup form</h2>
<?php echo validation_errors('<div class="error">', '</div>'); ?>
<?php echo form_open('signup/process', array('id'=>'form') ); ?>
<?php echo form_label('Name:', 'name'); ?>
<?php echo form_input( array('name'=>'name', 'id'=>'name', 'class'=>'required', 'value'=>set_value('name') ) ); ?>
<?php echo form_label('Email:', 'email'); ?>
<?php echo form_input( array('name'=>'email', 'id'=>'email', 'class'=>'required email', 'value'=>set_value('email') ) ); ?>
<?php echo form_label('Country:', 'country'); ?>
<?php echo form_dropdown('country', $countries, '','id="country" class="required"' ); ?>
<?php echo form_label('Mobile phone:', 'mobile'); ?>
<div><?php echo form_input( array('name'=>'prefix', 'id'=>'prefix', 'value'=>set_value('prefix') ) ); ?>
<?php echo form_input( array('name'=>'mobile', 'id'=>'mobile', 'class'=>'required digits', 'value'=>set_value('mobile') ) ); ?>
</div>
<div align="center"><?php echo form_submit('register', 'Register', 'class="submit"' ); ?></div>
</div>
</body>
</html>
讓我解釋一下一些標記。我在頭部添加了一個帶有通常的 meyerweb 重置 CSS 規則的 reset.css 文件和一個 design.css 文件，我們稍後將對其進行編碼。我已將這兩個檔案放在根目錄中名為 'css' 的資料夾中。我使用 base_url() 來取得視圖檔案中的根目錄。
我使用表單助理來建立表單開口，同時給出表單「表單」的 id，我使用相同的表單助理創建了幾個標籤和輸入。您會注意到我將一個陣列作為帶有 id 或 class 鍵的 form_input() 函數的第二個參數傳遞。有關使用表單助手的更多信息，請閱讀 CodeIgniter 文件。我使用 form_dropdown() 建立一個選擇框，它會傳遞一個名為 $countries 的選項陣列。我們還沒有這個數組，但我們稍後也會製作它。
第 5 步： 註冊 CSS
在css目錄下建立檔案design.css，放入application/views資料夾中，並輸入下列css規則：
body {
background-color: #CFCFCF;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: Helvetica, Verdana, Arial, sans-serif;
}
#wrap {
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
background-color: #ECECEC;
border: solid 1px #FCFCFC;
padding: 10px;
}
h2 {
margin-bottom: 10px;
font-size: 18px;
}
label {
display: block;
}
input, select {
width: 380px;
padding: 5px;
margin-bottom: 10px;
}
select {
width: 390px;
}
#prefix {
width: 50px;
margin-right: 10px;
margin-bottom: 0px;
display:inline;
}
#mobile {
width: 305px;
display:inline;
}
input.submit {
background-color: #E0E0E0;
border: solid 1px #C5C5C5;
width: 140px;
font-weight: bold;
margin-top: 10px;
}
input.error, select.error {
margin-bottom: 0px;
border: solid 1px #FFCCCC;
}
div.error {
padding: 5px;
background-color: #ffeeee;
border: solid 1px #FFCCCC;
color: #ff0000;
}
div.ok {
padding: 5px;
background-color: #CCFFCC;
border: solid 1px #44CC44;
color:#336633;
margin-bottom: 10px;
}
我建立了換行 div 樣式，透過將 margin-left 和 margin-right 設定為 auto 使其居中。然後，我對輸入進行了樣式設置，確保它們在所有瀏覽器中保持一致，然後創建了 3 個錯誤類別：.error、.ok 和 input.error。我們將把它與 jQuery 驗證插件一起使用。我還在我認為有必要進行樣式設計的地方使用了 5px 填充。
第 6 步： 国家/地区和前缀
如果您现在进行测试，您将收到一条通知，提示“未定义的变量国家/地区”和“为 foreach() 提供的参数无效”。我们如何添加国家/地区？好吧，我们可以将它们直接嵌入到选择中，但我们将使用配置文件。这确保我们可以轻松快速地更改任何国家/地区代码。我将包含国家/地区代码的表从countrycode.org 复制到一个新文件中，并使用巧妙的 jQuery 来处理单个字符串中的所有内容，从而得到最终的配置文件。我不会详细介绍。如果你想知道，请发表评论。在 application/config 文件夹中创建一个名为“countries.php”的新文件，并使用以下模型在 #config 数组中添加国家/地区：
$config = array(); $config[''] = ''; $config['93'] = 'Afghanistan'; $config['355'] = 'Albania'; $config['213'] = 'Algeria'; ... $config['967'] = 'Yemen'; $config['260'] = 'Zambia'; $config['263'] = 'Zimbabwe';
我使用前缀代码作为数组中的键。我们如何在视图中访问它？我们将在之前创建的控制器函数 index() 中加载这个特定的配置文件：
function index(){
$this->config->load('countries', true);
$data['countries'] = $this->config->item('countries');
$this->load->view('signup', $data );
}
我使用“$this->config->load()”来加载配置。您会注意到我还传递了 true 作为第二个参数。这会在全局配置中创建一个名为“国家/地区”的单独条目。如果我们不传递 true，则配置设置（来自 config 的数组）将添加到全局配置数组中。之后，我们只需将配置项分配给 $data['countries']，然后视图就会将其识别为 $countries。我还将 $data 数组作为第二个参数传递给视图。如果您现在测试该页面，您将在选择框中看到所有国家/地区！很好，对吧？
第 7 步： 使用 jQuery 进行验证
是时候做一些 jQuery 了。我们将为此使用 jquery 验证插件。该插件已经在 Microsoft 的 CDN 中，因此我们将从那里获取它，以及从 Google 的 CDN 获取 jQuery。我们还需要元数据插件才能直接在 html 中编写类：
<!-- html head --><br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br /><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><br /><script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.metadata.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('#form').validate( {'errorElement': 'div' } );
});
</script>
<!-- html head -->
验证插件的工作原理是向输入提供类名：required 用于要求非空值，email 用于验证电子邮件地址，数字 用于数字输入，以及更多我不会涉及的内容。您会注意到我对输入中的类进行了硬编码，只需查看开头的 html 即可。如果您现在进行测试，您会发现在输入后出现一个错误 div，其中包含我在 css 中编码的 .error 类。我还编写了 input.error 类，因为无效的输入也被分配了一个 .error 类。如果用户启用了 JavaScript，这将验证表单。
第 8 步：根据选择的国家/地区更改电话前缀
现在，当用户选择一个国家/地区时，我们将使用一个巧妙的事件来更改前缀输入的值。这样做只是为了视觉目的，因为在后端我们将从国家/地区值中获取前缀，但这会向用户显示如何输入他的电话。我们现在就这样做：
<script type="text/javascript">
$(document).ready( function(){
$('#form').validate( {'errorElement': 'div' } );
//change the prefix based on the country select
$('#country').change( function(){
$('#prefix').val( $('#country option:selected').val() );
});
});
</script>
好的，所以我创建了一个用于选择的更改事件的函数，并将所选选项的值分配给前缀输入值。没什么大不了的，但它使我们的注册表单变得非常简单。
这就是注册视图所需的全部内容。让我们创建激活函数和视图。
第9步：激活码查看
这是用户成功注册后将看到的页面。将会有一条消息告诉他检查他的手机，因为我们已经向他发送了一个他必须输入的代码。在signup.php控制器中，创建一个名为activate()的新函数：
function activate(){
$data = array();
$data['error'] = '';
$this->load->view('activate', $data );
}
如果激活不正确，我已经定义了一个错误变量以在视图中使用。当我们成功输入用户详细信息并发送短信后，将访问此页面。我们还将在 application/views 文件夹中创建一个名为 activate.php 的新文件，并输入以下标记：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Activate</title>
<link rel="stylesheet" href="<?php echo base_url(); ?>css/reset.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/design.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.metadata.js"></script>
<script type="text/javascript">
$(document).ready( function(){
$('.ok').hide().fadeIn(800);
$('#form').validate( {'errorElement': 'div' } );
});
</script>
</head>
<body>
<div id="wrap">
<h2>Confirm mobile phone</h2>
<div class="ok">Your account has been created. A sms has been sent to your mobile with a 5 digit activation code. Please enter the code to complete signup:</div>
<?php echo $error; ?>
<?php echo form_open('signup/activate', array('id'=>'form') ); ?>
<?php echo form_label('Code:', 'code'); ?>
<?php echo form_input( array('name'=>'code', 'id'=>'code', 'class'=>'required digits', 'value'=>set_value('code') ) ); ?>
<div align="center"><?php echo form_submit('signup', 'Complete signup', 'class="submit"' ); ?></div>
<hr />
If you haven't received the sms, please <a href="#">click here</a> to send it again
</div>
</body>
</html>
这里的标记非常简单。我已经包含了相同的 jQuery 和验证插件。在 document.ready 事件中，我像第一页一样调用了 jquery.validate() 。我们将使用 validate 来验证授权代码。我还淡入消息 div，以显示成功消息。我还设置了“required”和“digits”的类名，以将输入字段限制为数字和非空值。还有一条消息，其中包含供用户重新发送激活码的选项，但我不会详细介绍此功能，因为它与基本注册非常相似。
第 10 步： process() 后台函数
让我们创建一个函数来处理数据并将其插入数据库。我们还将使用验证库。在服务器上进行验证很重要，因为有些人可以关闭 JavaScript，因此验证将不起作用。这是一个后备措施，可以确保表中不会有任何无效数据。函数流程如下：
function process(){
$this->load->library('form_validation');
if ( $this->form_validation->run() ){
$signup = array();
$signup['name'] = $this->input->post('name');
$signup['email'] = $this->input->post('email');
$signup['country'] = $this->input->post('country');
$signup['mobile'] = $this->input->post('country').$this->input->post('mobile');
//generate the unique activation code
mt_rand();
$signup['activation'] = rand( 11111, 99999 );
//insert into db
$this->db->insert('users', $signup );
//send auth sms
set_cookie('signed', $this->db->insert_id(), 86500 );
//redirect
redirect('signup/activate');
} else {
$this->config->load('countries', true);
$data['countries'] = $this->config->item('countries');
$this->load->view('signup', $data );
}
}
嗯，代码太多了！让我们看一下所有主要部分：
我们首先加载表单验证库。之后，我们使用表单验证的 run() 函数来检查值是否正确。如果所有输入都通过，我们将使用 $this->input->post('input_name') 创建一个包含所有帖子数据的数组，并将数据插入到名为 users 的表中，我们将一会儿做。这里需要注意的一件事是我还生成了授权代码。我使用 mt_rand() 为随机生成器提供种子并生成唯一的 5 密码数。我们通过运行 rand() 来生成 11111 到 99999 之间的数字来实现这一点。这总是给我们提供长度为 5 个密码的数字。我没有使用 10000，因为我们可以获得一个重复其密码的数字，例如 10002，它看起来不太随机。我还使用数据库中实际插入的插入 ID 值设置了一个名为“signed”的 cookie，然后将用户重定向到激活函数。如果某些字段无效，我们会再次加载国家/地区并加载注册视图。如果您从头开始查看注册视图，您会发现我使用 set_value() 来获取上次注册的使用值。因此，如果存在无效字段，则其余字段将用最后的数据填充。但我们需要在注册视图中更新一行：
<?php echo form_dropdown('country', $countries, @$_POST['country'],'id="country" class="required"' ); ?>
我已将第三个参数替换为 $_POST['country']，确保它不会显示带有 @ 的通知。这会将选择选项设置为提交之前选择的选项。如果我们的帖子数据中没有国家/地区，我们将不会选择任何内容，就像注册开始时的情况一样。
第11步：验证规则
好吧，我打赌您会问：服务器如何知道服务器端验证的正确格式是什么？好吧，我们必须创建验证规则。幸运的是，CodeIgniter 允许您将它们写入 application/config 文件夹中名为 form_validation.php 的配置文件中。如果该文件尚不存在，则创建该文件并输入以下内容：
$config = array(
array('field'=>'name',
'label'=>'Name',
'rules'=>'required'),
array('field'=>'email',
'label'=>'Email',
'rules'=>'required|valid_email|callback_check_email_exists'),
array('field'=>'country',
'label'=>'Country',
'rules'=>'required'),
array('field'=>'mobile',
'label'=>'Mobile phone',
'rules'=>'required|numeric')
);
我使用这个多维数组来设置相应的验证规则。例如，对于名称字段，我使用“field”键设置名称字段的规则，使用“label”键设置错误消息中的字段名称（如果显示）和“rules”键来设置规则。我用管道字符（即“|”）分隔规则。有关可用规则的更多信息，请查看用户指南中的表单验证文档。我还创建了一个用户定义的回调（callback_check_email_exists）来检查电子邮件是否存在。将 callback_ 添加到规则名称中搜索控制器中的函数并调用它。该函数将检查数据库中是否存在相同的电子邮件地址，来源为：
function check_email_exists( $email ){
$rs = $this->db->where( 'email', $email )->count_all_results('users');
$this->form_validation->set_message('check_email_exists', "We're sorry, this email already exists!");
if( $rs < 1 ){
return true;
}
return false;
}
这是一个简单的函数，它接受一个参数（正在检查的值）并根据格式返回 true 或 false。我们检查表中是否有包含电子邮件地址的结果，如果有，则返回 false。如果我们想要验证，我们必须返回 true，如果无效则返回 false，所以这个函数名称有点尴尬。
第 12 步： MySQL 表
现在就别想测试激活了！你会得到一个严重的错误，因为我们还没有创建表！那么，您可以下载源代码并从 users.sql 文件导入 users 表，或者使用以下命令创建它：
CREATE TABLE `users` ( `uid` INT UNSIGNED NOT NULL AUTO_INCREMENT, `name` TEXT NOT NULL, `email` TEXT NOT NULL, `country` INT NOT NULL, `mobile` TEXT NOT NULL, `activation` TEXT NOT NULL, `active` INT NOT NULL, PRIMARY KEY (`uid`) );
在 phpMyAdmin 中运行此代码，您将创建表。
如果您现在测试代码，您将获得所有正确的验证。您只需禁用 JavaScript 即可尝试服务器验证。您不会收到无效数据！我警告过你！
第 1 部分结束
第一部分到此结束。下一次，在本系列的第二部分中，我们将介绍如何使用第三方 SMS 网关服务实际发送 SMS。我希望您喜欢我的教程，并感谢您留下来查看全部内容！
以上是第 1 部分：建立 SMS 訂閱表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！