دورة ANGULAR الدرس الخامس عشر


فهاد الدرس الخامس عشر غادي نكملوا الدورة ديالنا وندوزوا لنظام  التسجيل و تسجيل الدخول فغادي نشوفوا كيفاش نخليو المستخدم يتسجل فقاعدة البيانات ومن بعد يتكونيكطا أو يديكونيكطا.


1- إضافة ل class user

أول حاجة زيد table جديدة فقاعدة البيانات سميها users فيها كاين email,password كحقول.

منبعد غادي تزيد class جديدة سميها user بل commande :

ng g class user 

كيف سبق وزدنا قبل contact فيها غادي يكونوا المعلومات الخاصين بالمستخدم.


الكود لي غادي تزيد فل class user هو :

                                //
export class User {
  email: string;
  password: string

  constructor() {
    this.email = null;
    this.password = null;
  }
}
                            

2- إضافة login & auth components

منبعد غادي نزيد جوج ديال les components بل commande :

ng g component auth

ng g component login

ف auth غادي يكون خاص بالتسجيل و login بتسجيل الدخول.

منبعد غادي نمشي للملف app-routing.module.ts باش نزيدلهم les routes ديالهم كيف شفنا قبل.

الكود ديال الملف بعد التعديل هو :

                                //
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './home/home.component';
import {AddComponent} from './add/add.component';
import {AuthComponent} from './auth/auth.component';
import {LoginComponent} from './login/login.component';

const routes: Routes = [
	{path:"home",component:HomeComponent},
	{path:"add",component:AddComponent},
	//set default route to home
  {path:"",redirectTo:"home",pathMatch:"full"},
  {path:"auth",component:AuthComponent},
  {path:"login",component:LoginComponent},
];

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

3- إضافة ملف PHP الخاص بالتسجيل

غادي نمشيو ل dossier php-api لي سبق وزدنا وغادي نزيدو فيه ملف جديد سميه register.php  لي فيه ل code php لي كيمكن من إستقبال المعلومات لي جايين من الفورم لي غادي نزيدوها من بعد وتخزينهم فقاعدة البيانات.

من بعد مكنزيد ل user كنرجعوا على شكل json فالكود ديال الملف register.php هو :

                                //
<?php
require 'connection.php';
// Get the posted data.
$data = file_get_contents("php://input");

if(isset($data) && !empty($data))
{

	$request = json_decode($data);
	$password = sha1($request->password);

	$query = "INSERT INTO users (email,password) VALUES ('$request->email','$password')";

	if(mysqli_query($con,$query))
	{
		$user = [
		  'email' => $request->email,
		  'id'    => mysqli_insert_id($con),
		  'token' => bin2hex(random_bytes(64))
		];
		echo json_encode($user);
	}else{
		echo mysqli_error($con);
	}

}
                            

4- إضافة الكود الخاص بإضافة user

منبعد غادي نزيد service جديد نسميه user بل commande :
 
ng g service user 

منبعد غادي نمشي للملف user.service.ts فيه غادي نزيد ل fonction signUp لي غادي تمكن من إستقبال user وإرسالو للرابط ديال الإضافة لي كيتضمن الملف php لي زدنا. 

الكود ديال user.service.ts بعد التعديل : 

                                    //
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user';

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


  constructor(private httpClient: HttpClient) { }

  signUp(newUser: User): Observable<User> {
    return this.httpClient.post<User>("http://localhost/php-api/register.php",newUser);
  }

}