Teil 1: Erstellen Sie ein SMS-Abonnementformular-PHP-Tutorial-php.cn

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

SMS ist eine globale Technologie, die von fast jedem mit einem Mobiltelefon genutzt wird. Obwohl SMS-Programme eine viel größere Reichweite haben als der Smartphone-Markt, ist ihre Reichweite viel geringer und bleibt oft unkapitalisiert. In diesem Tutorial zeige ich Ihnen, wie Sie ein Website-Registrierungsformular erstellen, das es Benutzern ermöglicht, ihre Mobiltelefonnummer einzugeben. Als Nächstes zeige ich Ihnen, wie Sie mit PHP eine serverseitige Telefonnummernvalidierung durchführen, um zu überprüfen, ob die vom Benutzer eingegebene Mobiltelefonnummer tatsächlich seine ist. Unterwegs verwenden wir jQuery zur Durchführung der clientseitigen Validierung und CodeIgniter als unser Entwicklungsframework.

Schritt 1: Planung

Lassen Sie uns zunächst die Lösung skizzieren. Benutzer besuchen ein Registrierungsformular, wählen ein Land aus und geben eine Mobiltelefonnummer ein. Nach dem Absenden des Registrierungsformulars muss der Benutzer einen Bestätigungscode eingeben, der an die eingegebene Mobiltelefonnummer gesendet wird, um das neue Konto zu aktivieren. Wenn der Benutzer die Seite schließt, bevor er den Bestätigungscode eingegeben hat, und das Registrierungsformular später erneut aufruft, wird das Telefonnummernformular weiterhin angezeigt. Okay, fangen wir an!

Schritt 2: CodeIgniter herunterladen

Laden Sie CodeIgniter von www.codeigniter.com herunter. Als nächstes entpacken Sie den Ordner und kopieren ihn in das Webstammverzeichnis Ihres Webservers (Sie müssen Zugriff auf einen Webserver haben, der PHP analysieren kann, um dieses Tutorial abzuschließen). Das Kopieren in Ihr Netzwerkstammverzeichnis ist optional, hilft uns aber dabei, besser in den Quelldateien zu navigieren.

Navigieren Sie im Anwendungsverzeichnis zum Konfigurationsverzeichnis und öffnen Sie config.php. Dies ist die Hauptkonfiguration, in der wir einige Einstellungen vornehmen müssen, wie im folgenden Code gezeigt:

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

Nach dem Login kopieren

Als nächstes öffnen Sie „database.php“ im gleichen Konfigurationsordner und erledigen die folgenden Aufgaben:

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

Nach dem Login kopieren

Öffnen Sie abschließend autoload.php im Konfigurationsordner und fügen Sie einige Bibliotheken und Helfer hinzu, die wir benötigen:

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

Nach dem Login kopieren

Schritt 3: Controller registrieren

Lassen Sie uns den Registrierungscontroller erstellen. Erstellen Sie eine Datei mit dem Namen signup.php im Ordner „application/controllers“ und beginnen Sie mit der Codierung der Hauptregistrierungsfunktion:

class Signup extends Controller {

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

Nach dem Login kopieren

Ich habe die Signup-Klasse erstellt. Sie werden feststellen, dass sie denselben Namen wie die Datei hat und Controller erweitert. Ich habe die Funktion index() erstellt, um die Anzeige des Registrierungsformulars zu verwalten. Wir nennen es Index, weil dies die Standardfunktion ist, die beim Zugriff über die Standard-URL ohne Segmente aufgerufen wird. Wir müssen auch den Standard-Controller (Anmeldung) in config/routes.php konfigurieren:

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

Nach dem Login kopieren

Wenn Sie die App jetzt testen, erhalten Sie die Fehlermeldung „Angeforderte Datei konnte nicht geladen werden: signup.php“. Dies liegt daran, dass wir die Registrierungsansicht noch nicht erstellt haben. Fangen wir jetzt an.

Schritt 4: Registrieren Ansicht

Erstellen Sie eine neue Datei signup.php im Ordner application/views und geben Sie das folgende Markup ein:

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

Nach dem Login kopieren

Lassen Sie mich einige Noten erklären. Ich habe im Kopf eine Datei „reset.css“ mit den üblichen Meyerweb-Reset-CSS-Regeln und eine Datei „design.css“ hinzugefügt, die wir später codieren werden. Ich habe diese beiden Dateien in einem Ordner namens 'css' im Stammverzeichnis abgelegt. Ich verwende base_url(), um das Stammverzeichnis in der Ansichtsdatei abzurufen.

Ich verwende den Formular-Helfer, um die Formularöffnung zu erstellen, und gebe dabei die ID des Formulars „form“ an. Ich habe mit demselben Formular-Helfer mehrere Beschriftungen und Eingaben erstellt. Sie werden feststellen, dass ich als zweites Argument ein Array mit entweder ID- oder Klassenschlüsseln an die Funktion form_input() übergebe. Weitere Informationen zur Verwendung des Formularassistenten finden Sie in der CodeIgniter-Dokumentation. Ich erstelle mit form_dropdown() ein Auswahlfeld, das ein Array von Optionen namens $countries übergibt. Wir haben dieses Array noch nicht, aber wir werden es später auch erstellen.

Schritt 5: CSS registrieren

Erstellen Sie die Datei design.css im CSS-Verzeichnis, legen Sie sie im Ordner application/views ab und geben Sie die folgenden CSS-Regeln ein:

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

Nach dem Login kopieren

Ich habe einen Wrap-Div-Stil erstellt, der es zentriert, indem ich margin-left und margin-right auf auto gesetzt habe. Anschließend habe ich die Eingaben so gestaltet, dass sie in allen Browsern konsistent sind, und dann drei Fehlerklassen erstellt: .error, .ok und input.error. Wir werden es mit dem jQuery-Validierungs-Plugin verwenden. Ich habe auch 5px-Polsterung verwendet, wenn ich das Gefühl hatte, dass ein Styling notwendig war.

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

第9步：激活码查看

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

);

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

第 1 部分结束

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

Das obige ist der detaillierte Inhalt vonTeil 1: Erstellen Sie ein SMS-Abonnementformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!