1부: SMS 구독 양식 작성-PHP 튜토리얼-php.cn

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

SMS는 휴대폰을 사용하는 거의 모든 사람이 사용하는 글로벌 기술입니다. SMS 프로그래밍은 스마트폰 시장보다 도달 범위가 훨씬 넓지만 도달 범위는 훨씬 작으며 자본이 부족한 경우가 많습니다. 이 튜토리얼에서는 사용자가 휴대폰 번호를 입력할 수 있는 웹사이트 등록 양식을 만드는 방법을 보여 드리겠습니다. 다음으로 사용자가 입력한 휴대폰 번호가 실제로 그의 휴대폰 번호인지 확인하기 위해 PHP를 사용하여 서버측 전화번호 확인을 수행하는 방법을 보여 드리겠습니다. 그 과정에서 우리는 jQuery를 사용하여 클라이언트 측 유효성 검사를 수행하고 CodeIgniter를 개발 프레임워크로 사용할 것입니다.

1단계: 계획

먼저 솔루션 개요를 살펴보겠습니다. 사용자는 등록 양식을 방문하여 국가를 선택하고 휴대폰 번호를 입력합니다. 사용자는 등록 양식을 제출한 후 입력한 휴대폰 번호로 전송된 인증 코드를 입력해야 새 계정을 활성화할 수 있습니다. 사용자가 인증 코드를 입력하기 전에 페이지를 닫고 나중에 다시 등록 양식을 방문하면 전화 번호 양식이 계속 표시됩니다. 좋아, 시작해 보자!

2단계: CodeIgniter 다운로드

www.codeigniter.com에서 CodeIgniter를 다운로드하세요. 그런 다음 폴더의 압축을 풀고 웹 서버의 웹 루트 디렉터리에 복사합니다(이 튜토리얼을 완료하려면 PHP를 구문 분석할 수 있는 웹 서버에 대한 액세스 권한이 있어야 합니다). 네트워크 루트에 복사하는 것은 선택 사항이지만 그렇게 하면 소스 파일을 더 잘 탐색하는 데 도움이 됩니다.

애플리케이션 디렉토리에서 config 디렉토리로 이동하여 config.php를 엽니다. 이는 아래 코드와 같이 일부 설정을 지정해야 하는 기본 구성입니다.

으아아아

다음으로, 동일한 구성 폴더에서 Database.php를 열고 다음 과제를 완료하세요.

으아아아

마지막으로 config 폴더에서 autoload.php를 열고 필요한 라이브러리와 도우미를 추가하세요.

으아아아

3단계: 컨트롤러 등록

등록 컨트롤러를 만들어 보겠습니다. application/controllers 폴더에 signup.php라는 파일을 생성하고 주요 등록 기능 코딩을 시작해 보겠습니다.

으아아아

Signup 클래스를 만들었습니다. 이 클래스는 파일과 동일한 이름을 가지며 Controller를 확장합니다. 등록 양식 표시를 처리하기 위해 index() 함수를 만들었습니다. 이는 세그먼트 없이 기본 URL을 사용하여 액세스할 때 호출되는 기본 함수이기 때문에 이를 인덱스라고 부릅니다. 또한 config/routes.php에서 기본 컨트롤러(가입)를 구성해야 합니다.

으아아아

지금 앱을 테스트하면 "요청한 파일을 로드할 수 없습니다: signup.php"라는 오류 메시지가 표시됩니다. 아직 등록 뷰를 만들지 않았기 때문입니다. 지금 시작해 보겠습니다.

4단계: 등록 보기

application/views 폴더에 signup.php라는 새 파일을 만들고 다음 마크업을 입력하세요.

으아아아

몇 가지 마크에 대해 설명하겠습니다. 일반적인 meyerweb 재설정 CSS 규칙과 나중에 코딩할 design.css 파일을 사용하여 헤드에 Reset.css 파일을 추가했습니다. 이 두 파일을 루트 디렉터리의 'css' 폴더에 넣었습니다. 저는 base_url()을 사용하여 뷰 파일의 루트 디렉터리를 가져옵니다.

양식 열기를 만들기 위해 양식 도우미를 사용하고 있으며, 양식 "양식"의 ID를 제공하면서 동일한 양식 도우미를 사용하여 여러 레이블과 입력을 만들었습니다. id 또는 class 키를 사용하여 form_input() 함수에 두 번째 인수로 배열을 전달하고 있음을 알 수 있습니다. 양식 도우미 사용에 대한 자세한 내용은 CodeIgniter 설명서를 읽어보세요. $countries라는 옵션 배열을 전달하는 form_dropdown()을 사용하여 선택 상자를 만듭니다. 아직 이 배열은 없지만 나중에 만들 예정입니다.

5단계: CSS 등록

css 디렉토리에 design.css 파일을 생성하고 application/views 폴더에 넣은 후 다음 CSS 규칙을 입력하세요.

으아아아

margin-left 및 margin-right를 자동으로 설정하여 중앙에 배치하는 랩 div 스타일을 만들었습니다. 그런 다음 입력의 스타일을 지정하여 모든 브라우저에서 일관되게 유지되도록 한 다음 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 即可尝试服务器验证。您不会收到无效数据！我警告过你！