Bahagian 1: Bina borang langganan SMS-tutorial php-php.cn

第 1 部分：构建 SMS 订阅表单

Pemesejan teks ialah teknologi global yang digunakan oleh hampir semua orang dengan telefon bimbit. Walaupun pengaturcaraan SMS mempunyai jangkauan yang jauh lebih besar daripada pasaran telefon pintar, jangkauannya jauh lebih kecil dan selalunya kekal tanpa modal. Dalam tutorial ini, saya akan menunjukkan kepada anda cara membuat borang pendaftaran tapak web yang membolehkan pengguna memasukkan nombor telefon mudah alih mereka. Seterusnya saya akan menunjukkan kepada anda bagaimana untuk melakukan pengesahan nombor telefon sebelah pelayan menggunakan PHP untuk menyemak sama ada nombor mudah alih yang dimasukkan oleh pengguna sememangnya miliknya. Sepanjang perjalanan, kami akan menggunakan jQuery untuk melaksanakan pengesahan sisi klien dan CodeIgniter sebagai rangka kerja pembangunan kami.

Langkah 1: Perancangan

Mari mulakan dengan menggariskan penyelesaiannya. Pengguna akan melawati borang pendaftaran, memilih negara dan memasukkan nombor mudah alih. Selepas menyerahkan borang pendaftaran, pengguna perlu memasukkan kod pengesahan yang dihantar ke nombor telefon bimbit yang dimasukkan untuk mengaktifkan akaun baharu. Jika pengguna menutup halaman sebelum memasukkan kod pengesahan dan melawat borang pendaftaran sekali lagi kemudian, borang nombor telefon masih akan dipaparkan. OK, mari mulakan!

Langkah 2: Muat Turun CodeIgniter

Muat turun CodeIgniter daripada www.codeigniter.com. Seterusnya, nyahzip folder dan salin ke direktori akar web pelayan web anda (anda mesti mempunyai akses kepada pelayan web yang boleh menghuraikan PHP untuk melengkapkan tutorial ini). Menyalin ke akar rangkaian anda adalah pilihan, tetapi berbuat demikian akan membantu kami menavigasi fail sumber dengan lebih baik.

Dalam direktori aplikasi, navigasi ke direktori konfigurasi dan buka config.php. Ini ialah konfigurasi utama di mana kita perlu menetapkan beberapa tetapan seperti yang ditunjukkan dalam kod di bawah:

$config['base_url']      =   "http://localhost/sending_sms/";
...
$config['index_page']    =   "index.php";
...
$config['uri_protocol']	 =   "AUTO";

Salin selepas log masuk

Seterusnya, buka pangkalan data.php dalam folder konfigurasi yang sama dan selesaikan tugasan berikut:

db['default']['hostname']  = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "__password__";
$db['default']['database'] = "sms_users";

Salin selepas log masuk

Akhir sekali, buka autoload.php dalam folder konfigurasi dan tambahkan beberapa perpustakaan dan pembantu yang kami perlukan:

$autoload['libraries'] = array('database');
...
$autoload['helper'] = array('url', 'form', 'cookie');

Salin selepas log masuk

Langkah 3: Daftar Pengawal

Mari buat pengawal pendaftaran. Cipta fail bernama signup.php dalam folder aplikasi/pengawal dan mari mulakan pengekodan fungsi pendaftaran utama:

class Signup extends Controller {

	function Signup(){
		parent::Controller();
	}
	
	function index(){
		$this->load->view('signup' );
	}
	
}

Salin selepas log masuk

Saya telah mencipta kelas Pendaftaran, anda akan perasan ia mempunyai nama yang sama dengan fail dan ia memanjangkan Pengawal. Saya mencipta fungsi index() untuk mengendalikan paparan borang pendaftaran. Kami memanggilnya indeks kerana ini ialah fungsi lalai yang dipanggil apabila diakses menggunakan url lalai, tanpa sebarang segmen. Kita juga mesti mengkonfigurasi pengawal lalai (pendaftaran) dalam config/routes.php:

$route['default_controller'] = "signup";

Salin selepas log masuk

Jika anda menguji apl sekarang, anda akan mendapat mesej ralat yang memberitahu anda "Tidak dapat memuatkan fail yang diminta: signup.php". Ini kerana kami belum membuat paparan pendaftaran lagi. Jom mulakan sekarang.

Langkah 4: Daftar Lihat

Buat pendaftaran fail baharu.php dalam folder application/views dan masukkan tag berikut:

<!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>

Salin selepas log masuk

Biar saya jelaskan beberapa markah. Saya menambah fail reset.css di kepala dengan peraturan CSS tetapan semula meyerweb biasa dan fail design.css yang akan kami kodkan kemudian. Saya telah meletakkan kedua-dua fail ini dalam folder yang dipanggil 'css' dalam direktori akar. Saya menggunakan base_url() untuk mendapatkan direktori akar dalam fail paparan.

Saya menggunakan pembantu borang untuk membuat pembukaan borang sambil memberikan id borang "borang", saya telah mencipta beberapa label dan input menggunakan pembantu borang yang sama. Anda akan perasan bahawa saya menghantar tatasusunan sebagai hujah kedua kepada fungsi form_input() dengan sama ada id atau kekunci kelas. Untuk mendapatkan maklumat lanjut tentang menggunakan pembantu borang, baca dokumentasi CodeIgniter. Saya mencipta kotak pilih menggunakan form_dropdown() yang melepasi pelbagai pilihan yang dipanggil $countries. Kami belum mempunyai tatasusunan ini, tetapi kami akan membuatnya kemudian juga.

Langkah 5: Daftar CSS

Buat reka bentuk fail.css dalam direktori css, letakkannya dalam folder application/views, dan masukkan peraturan css berikut:

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;
}

Salin selepas log masuk

Saya mencipta gaya div bungkus yang memusatkannya dengan menetapkan margin-kiri dan margin-kanan kepada auto. Saya kemudiannya menggayakan input untuk memastikan ia konsisten merentas semua penyemak imbas, dan kemudian mencipta 3 kelas ralat: .error, .ok dan input.error. Kami akan menggunakannya dengan pemalam pengesahan jQuery. Saya juga menggunakan pelapik 5px di mana saya merasakan penggayaan adalah perlu.

第 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';

Salin selepas log masuk

我使用前缀代码作为数组中的键。我们如何在视图中访问它？我们将在之前创建的控制器函数 index() 中加载这个特定的配置文件：

function index(){
	$this->config->load('countries', true);
	$data['countries'] = $this->config->item('countries');
		
	$this->load->view('signup', $data );
}

Salin selepas log masuk

我使用“$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 -->

Salin selepas log masuk

验证插件的工作原理是向输入提供类名：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>

Salin selepas log masuk

好的，所以我创建了一个用于选择的更改事件的函数，并将所选选项的值分配给前缀输入值。没什么大不了的，但它使我们的注册表单变得非常简单。

这就是注册视图所需的全部内容。让我们创建激活函数和视图。

第9步：激活码查看

这是用户成功注册后将看到的页面。将会有一条消息告诉他检查他的手机，因为我们已经向他发送了一个他必须输入的代码。在signup.php控制器中，创建一个名为activate()的新函数：

function activate(){
    $data = array();
    $data['error'] = '';
    $this->load->view('activate', $data );
}

Salin selepas log masuk

如果激活不正确，我已经定义了一个错误变量以在视图中使用。当我们成功输入用户详细信息并发送短信后，将访问此页面。我们还将在 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>

Salin selepas log masuk

这里的标记非常简单。我已经包含了相同的 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 );
    }
}

Salin selepas log masuk

嗯，代码太多了！让我们看一下所有主要部分：

我们首先加载表单验证库。之后，我们使用表单验证的 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"' ); ?>

Salin selepas log masuk

我已将第三个参数替换为 $_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')

);

Salin selepas log masuk

我使用这个多维数组来设置相应的验证规则。例如，对于名称字段，我使用“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;
}

Salin selepas log masuk

这是一个简单的函数，它接受一个参数（正在检查的值）并根据格式返回 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`) );

Salin selepas log masuk

在 phpMyAdmin 中运行此代码，您将创建表。

如果您现在测试代码，您将获得所有正确的验证。您只需禁用 JavaScript 即可尝试服务器验证。您不会收到无效数据！我警告过你！

第 1 部分结束

第一部分到此结束。下一次，在本系列的第二部分中，我们将介绍如何使用第三方 SMS 网关服务实际发送 SMS。我希望您喜欢我的教程，并感谢您留下来查看全部内容！

Atas ialah kandungan terperinci Bahagian 1: Bina borang langganan SMS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!