نقاط الدرس
client side
- انشاء دالة submit بصفحة register التي تنقل بيانات المترشح وترسل طلب الى ملف الخدمة
- اضافة حاوية الاخطاء بملف register.html في حال وجود خطأ .سيقوم بعرضه
- انشاء دالة register() بملف الخدمة التي تتصل بالخادم وتنقل اليه البيانات المدخلة من طرف المستخدم
server side
- انشاء نمودج- فورم لتسجيل الدخول RegisterForm
الدي سنضع بداخله القواعد والقوانين التي تتقيد بها حقول جدول user
- انشاء الميثود actionRegister
التي تقوم بمعالجة البيانات وانشاء المستخدم ثم ترسل رد للتطبيق
- تضمين مسار register في مدير المسارات config
تفاصيل الدرس
register.ts
import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';
import { AuthenticationProvider } from '../../providers/authentication/authentication';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HomePage } from '../home/home';
import { LoginPage } from '../login/login';
/**
* Generated class for the RegisterPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@Component({
selector: 'page-register',
templateUrl: 'register.html',
})
export class RegisterPage {
public _registerForm:FormGroup;
public _submitted:boolean = false;
public errorFields:string = ''; // +
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public authenticationProvider: AuthenticationProvider,
public _formBuilder:FormBuilder,
public loadingCtrl: LoadingController,
private alertCtrl: AlertController,
) {
this.createForm(); // تمهيد حقول فورم تسجيل الدخول مباشرة بعد اقلاع الصفحة
}
ionViewDidLoad() {
console.log('ionViewDidLoad RegisterPage');
}
public createForm(){
this._registerForm = this._formBuilder.group({
username: ['', Validators.required],
lastname: ['', Validators.required],
firstname: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
});
}
homePage(){ // في اعلى صفحة تسجيل الدخول ستجد زر يوجهك نحو الصفحة الرئيسية
this.navCtrl.push(HomePage);
}
loginPage(){ // الزر الدي يوجهك نحو صفحة تسجيل الدخول
this.navCtrl.push(LoginPage);
}
onSubmit(dataForm: any) {
this._submitted = true; //handler مقبض يعلن عن انه تم الضغط على زر الدخول
let data:any = { // بناء كائن يمثل بيانات تسجيل الدخول ثم ارسالها الى ملف الخدمة
firstname: dataForm.firstname,
lastname: dataForm.lastname,
username: dataForm.username,
email: dataForm.email,
password: dataForm.password,
}
let loading = this.loadingCtrl.create({ // انشاء نافدة انتظار
content: 'Please wait...'
});
loading.present();
this.authenticationProvider.register(data)
.subscribe(
result => {
let response:any = result;
setTimeout(() => { // غلق نافدة الانتظار
loading.dismiss();
}, 500);
let alert = this.alertCtrl.create({ // انشاء نافدة بعد نجاح التسجيل
title: 'User Registered',
subTitle: 'User was added successfully',
buttons: [ // الازارار التي ستظهر بالنافدة
{
text: 'OK',
role: 'cancel',
handler: () => { // حدث مابعد الضغط على الزر
this.navCtrl.setRoot(LoginPage); // توجيه المستخدم نحو صفحة الدخول بعد نجاح عملية التسجيل
}
},
],
enableBackdropDismiss: false ,
});
alert.present();
},
errors => {
setTimeout(() => { // غلق نافدة الانتظار
loading.dismiss();
}, 500);
if(errors.status==422){
// let errorFields = JSON.parse(errors.error.message); // تحويل محتوى الرسالة الى كائن json
this.errorFields = errors.error.message;
}
}
);
}
}
register.html
<ion-header >
<div class="main-header">
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
<strong>Register</strong> Account
</ion-title>
<ion-buttons end>
<button ion-button tappable (click)="homePage()">
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</div>
</ion-header>
<ion-content>
<form [formGroup]="_registerForm" (ngSubmit)="onSubmit(_registerForm.value)">
<ion-row>
<ion-col text-center>
<ion-icon name="person"></ion-icon>
</ion-col>
</ion-row>
<ion-row *ngIf="errorFields"> <!-- شرط توفر الخطأ -->
<ion-col [innerHTML]="errorFields" style="color: #a91010;font-weight: 700;"></ion-col>
</ion-row>
<ion-list>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" [formControl]="_registerForm.controls['username']"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Lastname</ion-label>
<ion-input type="text" [formControl]="_registerForm.controls['lastname']"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Firstname</ion-label>
<ion-input type="text" [formControl]="_registerForm.controls['firstname']"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="text" [formControl]="_registerForm.controls['email']"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [formControl]="_registerForm.controls['password']"></ion-input>
</ion-item>
</ion-list>
<button ion-button type="submit" [disabled]="!_registerForm.valid">Register</button> or
<button ion-button type="button" (click)='loginPage()'>Login</button>
</form>
</ion-content>
authentication.ts
register(data:any){
const httpOptions = {
headers: new HttpHeaders({
'charset': 'UTF-8',
})
};
let url:string = this.baseUrl+'/user/register';
return this.httpClient
.post(url,data ,httpOptions) // عملية post
.pipe(
map((response) => {
return response; // تحويل النتيجة الى المكون
})
);
}
server side
انشاء نمودج تسجيل الدخول RegisterForm.php
والدي سنضع به القواعد وقوانين الحقول التي يتقيد بها فورم تسجيل المستخدم
api/v1/models/RegisterForm.php
<?php
namespace api\modules\v1\models; // change namespace
use yii\base\Model;
use common\models\User;
class RegisterForm extends Model
{
public $lastname;
public $firstname;
public $username;
public $email;
public $password;
public function rules(){ //conditions القواعد
return [
[['username','firstname','lastname','email','password' ],'safe'],
[['username','email' ],'trim'],
[['username','firstname','lastname','email' ],'required'],
['username', 'unique', 'targetClass' => '\common\models\User', 'message' => 'This username has already been taken.'],
['username', 'string', 'min' => 2, 'max' => 255],
['email', 'email'],
['email', 'string', 'max' => 255],
['email', 'unique', 'targetClass' => '\common\models\User', 'message' => 'This email address has already been taken.'],
['password', 'string', 'min' => 6],
];
}
// دالة تقوم بتسجيل المستخدم بقاعدة البيانات مع مراقبة محتوى الحقول حسب القواعد الموجودة بالنمودج rules
// register هذه الدالة يتم مناداتها عن طريق الكونترلر لاحقا من الميثود
public function signup(){
if (!$this->validate()) {
return null;
}
$user = new User();
$user->username = $this->username;
$user->firstname = $this->firstname;
$user->lastname = $this->lastname;
$user->email = $this->email;
$user->setPassword($this->password);
$user->generateAuthKey();
return $user->save() ? $user : null;
}
}
نضيف الميثود actionRegister بالكونترولر UserController
public function actionRegister(){
$model = new RegisterForm(); // نمودج موديل لتسجيل مستخدم .
//نستخدم هدا النوع من النمادج لوضع شروط وقواعد
$data['RegisterForm'] = Yii::$app->getRequest()->getBodyParams(); // البيانات التي استقبلها الخادم من التطبيق POST
if ($model->load($data)) { // شحن نمودج الموديل
if ($user = $model->signup()) { // تسجيل البيانات بالجدول في قاعدة البيانات
return true;
}else{
$errors = Html::errorSummary($model, ['header' => '']);
throw new HttpException(422, $errors); # Validation error //رمي خطأ ادا لم تتطابق القواعد مع البيانات المستقبلة
}
}else{
throw new HttpException(500, json_encode('action model')); # Validation error
}
}
في اعلى الكنترولر قم بتضمين ملف النمودج RegisterForm
// use ...
use api\modules\v1\models\RegisterForm;
// use ...
في دالة behaviors نقوم بالسماح الى الميثود actionRegister بعدم وضع جدار حماية عليها حتى يتمكن المستخدم من الوصول اليها وتنفيدها دون الحاجة الى تصريح بالوصول
// add register in except array
$behaviors['authenticator'] = [
'class' => CompositeAuth::className(),
'authMethods' => [
HttpBearerAuth::className(),
],
'except'=>['options', 'login','register'], // استثناء دالة تسجيل الدخول ودالة تسجيل مستخدم جديد
];
اضف المسار الميثود register بملف api/config/main.php
,
[
'class' => 'yii\rest\UrlRule',
'controller' => 'v1/user',
'pluralize' => false,
'tokens' => [
'{id}' => '<id:\d+>',
],
'extraPatterns' => [
'POST login' => 'login',
'OPTIONS login' => 'options',
'GET profile' => 'profile',
'OPTIONS profile' => 'options',
'POST register' => 'register', //+
'OPTIONS register' => 'options', //+
],
],
النتيجة

