انشاء مستخدم جديد والتعرف على الـ CREATE في API

سنقوم بانشاء مستخدم جديد وعندما نقول ننشيء شيء بالـ API فنحن نقصد تعليمة CREATE وعندما نقول CREATE  فحتما سنستعمل الـ POST كما وضحنا بالدرس الماضي

فكيف سنفعل دلك ؟

سوف نقوم بارسال بيانات على شكل JSON  بالـ POST  الى هدا المسار 

http://localhost/webapi/api.php/users

عندما يعرف الـ API ان ان البيانات التي أرسلتها عن طريق POST سيفهم انك ترغب باضافة هده البيانات الى الجدول users 

لنفتح ملف Form  لندخل من خلاله البيانات اللازمة   وأفضل فورم هنا سيكون فورم Register حيث يسمكننا من انشاء مستخدم جديد 

ادن سنقوم بانشاء مركب جديد component خاص بتسجيل مستخدم جديد  ثم بعدها سنقوم بتركيب مصفوفة البيانات اللازمة التي سيرسلها الـ component الى ملف الخدمة والدي بدوره سيقوم بارسال بيانات المستخدم الى السرفر (API) عن طريق الـ method POST 

1. انشاء  المركب المسؤول عن تسجيل حساب register  وليكن داخل مجلد اسمه users

ng g c users/register

2. نتفقد الـ app.module ونتأكد انه قد قام بتضمينه كما درسنا بمواضيع الدورة الأولى. حتى ننتجنب أي خطأ 

3. نقوم بانشاء route أو بمعنى أوضح مسار لهدا المركب لكي يصبح قابل للوصول اليه   .درس الـ routing  موجود  هنا  لمن يرغب  بالاطلاع عليه 

 ننشيء ملف المسؤول عن المسارات src/app/app.routing.module.ts نقوم باضافة مركب الـ register  داخل مدير المسارات أيضا نقوم بتضمين RgisterComponent كما هو مؤشر بعلامة (+)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegisterComponent } from './users/register/register.component'; //+
const routes: Routes = [
   {path: 'register',component: RegisterComponent,} ,  //+
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

نضيف مدير المسارات app.routing.module.ts  داخل ملف  app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UserService } from './services/user.service';
import { HttpClientModule } from '@angular/common/http';
import { RegisterComponent } from './users/register/register.component';
import { AppRoutingModule } from './app.routing.module'; //+

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent
  ],
  imports: [
    AppRoutingModule, // +
    BrowserModule,
    HttpClientModule, 
  ],
  providers: [
    UserService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. ندهب الى قائمة menu بملف template  ونضيف المسار الخاص بالـ register ومسار login والصفحة الرئيسية عن طريق التعليمة routerLink ..طبعا نحن نقصد ملف app.component.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="/">CRUD</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLink="/">Home </a>
      </li>
    </ul>
    <a routerLink="/login" class="btn btn-outline-success my-2 my-sm-0" >Login</a>
    <a routerLink="/register" class="btn btn-outline-success my-2 my-sm-0" >Register</a>
  </div>
</nav>

طبعا الان عندما تحاول الضغط على زر register لن يحدث شيء لأنك لم تضع الدركتيف المسؤول على الانتقال بين components

قم باضافته بملف app.component.html  في اي مكان ترغب أن يقوم بتضمين المحتوى  داخله

<router-outlet></router-outlet>

لنضعه مثلا فوق جدول المستخدمين الدي قمنا بانشاءه

<div class="container">

<router-outlet></router-outlet>
<br>

  <table *ngIf='users' class="table table-dark">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Username</th>
        <th scope="col">Email</th>
        <th scope="col">password</th>
      </tr>
    </thead>
    <tbody>
        <tr *ngFor='let user of users'>
            <th scope="row">{{  user.id  }}</th>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.password }}</td>
        </tr>
    </tbody>
  </table>
</div>

الأن سيعمل الزر بنجاح وسيعرض محتوى المكون register الدي سنضع داخله فورم تسجيل (انشاء) المستخدم  كما في الصورة 

دعك من الجدول حاليا سنتولى أمره لاحقا  وسوف ننقله الى المكان المناسب في الوقت المناسب  فمايهمنا الان هو  تعلم كيفية الانشاء CREATE وأبجدية التواصل مع API

 5. سننشيء الأن فورم تسجيل المستخدم   .

افتح ملف register.component.ts واضف بيانات الفورم

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms'; // + اضف

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  public  title = 'Create User';

  public _registerForm:FormGroup;
  public _submitted:boolean = false;

   

  constructor(
      public _formBuilder:FormBuilder,
  ) {
     this.createForm();
  }

  public createForm(){
    this._registerForm = this._formBuilder.group({
      username: ['', Validators.required],
      email: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
    });
}


  ngOnInit() {
  }


  onSubmit(elementValues: any) {
    this._submitted = true;
    console.log('works !');
    }

}


 

أضف فورم التسجيل داخل ملف template

<h1>Register user Form </h1>
<form [formGroup]="_registerForm" (ngSubmit)="onSubmit(_registerForm.value)">
 
    <div class="form-group">
      <label>Username</label>
      <input class="form-control" [formControl]="_registerForm.controls['username']">
     </div>

     <div class="form-group">
        <label>Email</label>
        <input class="form-control" [formControl]="_registerForm.controls['email']">
       </div>


     <div class="form-group">
            <label>Password</label>
            <input class="form-control" type="password" placeholder="password" [formControl]="_registerForm.controls['password']" >
     </div>

     <button type="submit" [disabled]="!_registerForm.valid ">انشاء مستخدم</button>
</form>

 قم بتضمين  الـ module  الخاص بادارة الفورم داخل  app.module

import { ReactiveFormsModule } from '@angular/forms';

imports: [
   //   
   ReactiveFormsModule,
   // 
],

كل شيء جيد والفورم يعمل كما في الصور

لم يتبقى الان سوى تجهيز الدوال  التي سترسل هده البيانات الى السرفر (API) والدي سيضيفها الى قاعدة البيانات

6. ندهب الى ملف register ونعدل على دالة onSubmited

  onSubmit(elementValues: any) {
      this._submitted = true;
      this.userService.register(elementValues)
      .subscribe(
              result => {
                console.log('user added !');
                console.log(result);
              },
              error => {
                  this._submitted = false;
                  // Validation error
                  console.log(error);
              }
      );
    }

ليكون الملف بهدا الشكل والاضافات التي اضفناها ستجدها بعلامة (+)

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms'; 
import { UserService } from '../../services/user.service';  // + أضف

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  public  title = 'Create User';

  public _registerForm:FormGroup;
  public _submitted:boolean = false;

   

  constructor(
      public _formBuilder:FormBuilder,
      public userService:UserService,   // + أضف
  ) {
     this.createForm();
  }


  ngOnInit() { 
  }


  onSubmit(elementValues: any) {  // + أضف
      this._submitted = true;
      this.userService.register(elementValues)
      .subscribe(
              result => {
                console.log('user added !');
                console.log(result);
              },
              error => {
                  this._submitted = false;
                  // Validation error
                  console.log(error);
              }
      );
    }


  public createForm(){
    this._registerForm = this._formBuilder.group({
      username: ['', Validators.required],
      email: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
    });
}


}


 

تنقصنا دالة register  والتي يتوجب علينا انشائها بملف الخدمة users.service وستكون بهدا الشكل

  public register(data:any) {  
    let user = {                  // بناء مصفوفة المستخدم
          "username": data.username,
          "password": data.password,
          "email": data.email,
   };
   let url = 'http://localhost/webapi/api.php/users'; // تكوين المسار
    return this.httpClient
        .post(url , user )                            // عملية post
        .pipe(
            map((response) => {
                  return response;                  // تحويل النتيجة الى المكون
            })
        );
}

ليكون الملف بشكل نهائي هكدى

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';  //+
import { map } from 'rxjs/operators';  //+

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(public httpClient: HttpClient,) { }



  public register(data:any) {  
    let user = {                  // بناء مصفوفة المستخدم
          "username": data.username,
          "password": data.password,
          "email": data.email,
   };
   let url = 'http://localhost/webapi/api.php/users'; // تكوين المسار
    return this.httpClient
        .post(url , user )                            // عملية post
        .pipe(
            map((response) => {
                  return response;                  // تحويل النتيجة الى المكون
            })
        );
}



  getUsers(url:string){
   return  this.httpClient.get(url)
      .pipe(
        map(res => res) 
      );
  }

}

النتيجة تم انشاء المستخدم عن طريق ميثود POST

ادا كنت تستعمل api اخر  مركب على laravel او على symfony أو Yii  أو ماشابه عليك ان تتأكد من قيوده لانه لكل api  قيود وتعليمات مبرمجة عليه بشكل افتراضي عليك التقيد بها .. ابحث عن الخطأ ادا صادفك  بgoogle  أو ضعه بخانة التعليقات لنساعدك بحل المشكلة ان امكن دلك

ادا صادفك خطأ بالـ rxjs 

ERROR in node_modules/rxjs/internal/Observable.d.ts(14,10): error TS2393: Duplicate function implementation.

فماعليك سوى تنصيب نسخة مصححة منه

npm install rxjs

الدروس السابقة :

1. المستوى الثاني من Angular 
2. انشاء واختيار api مع قاعدة البيانات mysql - Angular 
3. انشاء وتمهيد مشروع الدورة angular 
4. دمج bootstrap & jquery داخل مشروع angular 
5. انشاء الصفحة الرئيسية للتطبيق angular 
6. ماهو الفرق بين API و REST API وماهي وظفتهما - angular
7. عرض قائمة users وجلبها عبر API من قاعدة البيانات