mini proget angular and php: newsfeed manager.

if you want help, please contact us in our email:
mouhamed_ali_derwich@webi4u.com
if you want help, please contact us in our email:
mouhamed_ali_derwich@webi4u.com

Display user profile:

When the user has been login, we take care to display the details of his profile.

So we'll do this following uses case:

  • create user profile in html.
  • get user profile details from php server.

1. create user profile in html:

we display all the information of the user in question, such as: cover image, user image, user full name, etc. the following html code in [profile.component.html] file:

<div class="container-fluid profile" style="padding: 0px">
	<header>
		<div class="cover_img">
			<img [src]="user.coverimg"/>
		</div>
		<div class="user_img">
			<img [src]="user.userimg"/>
		</div>
		<h2 class="user_name">
			{{user.firstname}} {{user.lastname}}
		</h2>
		<span class="job">
			{{user.job}}
		</span>
	</header>
	<section>
		<div class="item">
			<span class="label">
				first name
			</span>
			<br/>
			<em class="content">
				{{user.firstname}}
			</em>
		</div>
		<div class="item">
			<span class="label">
				last name
			</span>
			<br/>
			<em class="content">
				{{user.lastname}}
			</em>
		</div>
		<div class="item">
			<span class="label">
				adress email
			</span>
			<br/>
			<em class="content">
				{{user.email}}
			</em>
		</div>
		<div class="item">
			<span class="label">
				user name
			</span>
			<br/>
			<em class="content">
				{{user.username}}
			</em>
		</div>
		<div class="item">
			<span class="label">
				password
			</span>
			<br/>
			<em class="content">
				{{user.password}}
			</em>
		</div>
	</section>
</div>                    
                    

2. get user profile details from php server:

now, we get our user profile in question from php server. first of all we import the following library on the file [profile.component.ts]:

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

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

  @Input("token")
  token: string;
  user: any;
  constructor(private http: HttpClient) { }

  ngOnInit() {
  	// get user profile
  	let params = new FormData();
    params.append('token',this.token);
    this.http.post("http://127.0.0.1/newsfeed_php_project/getUser.php",params)
            .subscribe(response => {
            	this.user = response;                  
            });
  }
}

                    

3. user profile result in php:

in the end we will retrieve the user profile in question from the database, and we will send it to the angular client in a forma json. copy this code in [profile.php]:

<?php

header("Access-Control-Allow-Origin: *");
header("Content-type:application/json");

$servername = "localhost";
$username_db = "root";
$password_db = "root";

$token = $_POST['token'];

try{
    $conn = new PDO("mysql:host=$servername;dbname=newsfeed", $username_db, $password_db);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql = "SELECT * FROM user WHERE user.token = '$token'";
    $user = $conn->prepare($sql);
    $user->execute();
    echo json_encode($user->fetchAll()[0]);
} catch (Exception $ex) {
    
}