ربط صفحة register مع api

نقاط الدرس

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',   //+
                    ],

                ],

النتيجة