Edit the profile details using Angular2

Edit the profile details using Angular2

Dated on: 25/10/2018

In this post we are going to see how to edit the profile details using angular 2. In previous post we have seen how to create the sign up form

https://blog.pheonixsolutions.com/how-to-create-a-signup-form-and-edit-the-details-using-angular2/

Step 1: Create the new component or new project as you wish here i  have created the new project so i done my code in app.component.To create a new project use

ng new project_name

To create a new component use

ng generate component [component-name]

Step 2: To create the form design of the editing the details we first have to add the html design code in app.component.html.Here we have attached the code of html.

<h2> profile </h2>
Name:<input type="text" name="Name" id="Name" value="{{Name}}" > <br><br>
Gender:<input type="text" name="Gender" id ="Gender" value="{{Gender}}"><br><br>
Mail:<input type="text" name="Mail" id="Mail" value="{{Mail}}"><br><br>
Qualification: <input type="text" name="Qualification" id="Qualification" value="{{Qualification}}"><br><br>
Hobbies:<input type="text" name="Hobbies" id="Hobbies" value="{{Hobbies}}"><br><br>

Phone No:<input type="text" name="Phone" id="Phone" value="{{Phone}}"><br><br>
<button type="button" name="submit" (click)="clickAlert()">Update</button>
<button type="button" name="submit" (click)="clickAlert()">Logout</button>

Step 3: Use the component.ts code to fetch and update the values to the database .

import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions,HttpModule } from '@angular/http';
import { ActivatedRoute } from '@angular/router';
import {HttpClientModule} from '@angular/common/http';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor (private http:Http) { }
  title = 'app';
   public info: any;
  ngOnInit() 
  {

  let headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
      // Make the HTTP request:
      // this.http.get('http://jsonip.com/')
      this.http.get('http://localhost/fetch.php', {headers: headers})
             .subscribe(res =>{
               this.info= res.json();
              console.log(this.info);
                this.Name = this.info.name;
                this.Gender = this.info.gender
                this.Mail = this.info.gmail
                this.Qualification = this.info.qualification
                this.Hobbies = this.info.hobbies
                this.Phone = this.info.phoneno
                           

             } );
  }
  clickAlert()
  {
        var headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');
  
  var data = document.getElementById("Name");
  console.log(data.value);
  var data1 = document.getElementById("Gender");
  console.log(data1.value);
  var data2 = document.getElementById("Mail");
  console.log(data2.value);
  var data3 = document.getElementById("Qualification");
  console.log(data3.value);
  var data4 = document.getElementById("Hobbies");
  console.log(data4.value);
  var data5 = document.getElementById("Phone");
  console.log(data5.value);

  /* var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');*/
     
     var params = 'Name='+data.value+'&Gender='+data1.value+'&Mail='+data2.value, '&Qualification='+data3.value, '&Hobbies='+data4.value, '&Phone='+data5.value;
    this.http.post('http://localhost/update.php', params , {headers: headers})
      .subscribe(
        data => console.log('Received:' + data),
        err => console.log(err),
        () => console.log('Call Complete')
      );

  }

Step 4: Don’t forget to create the php file to fetch the values from the database and to update the values to the database.Here we have used the two php in the name of fetch.php and update.php

Fetch.php

<?php
print_r($_POST);
$Name = $_POST['Name'];
$Gender = $_POST['Gender'];
$Mail = $_POST['Mail'];
$Qualification = $_POST['Qualification'];
$Hobbies = $_POST['Hobbies'];
$Phone = $_POST['Phone'];
?>

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "profile";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM model where name='$Name'";
$result = $conn->query($sql);
while($rowval = mysql_fetch_array($result))
{
$Name= $rowval['name'];
$Gender= $rowval['gender'];
$Mail= $rowval['gmail'];
$Qualification= $rowval['qualification'];
$Hobbies= $rowval['hobbies'];
$Phone= $rowval['phone'];
}
if ($result->num_rows > 0) { 
  $row = $result->fetch_assoc(); 
  echo json_encode($row);
} 
else {
  echo "0 results";
}
$conn->close();
?>

update.php

<?php
$Name = $_POST['Name'];
$Gender = $_POST['Gender'];
$Mail = $_POST['Mail'];
$Qualification = $_POST['Qualification'];
$Hobbies = $_POST['Hobbies'];
$Phone = $_POST['Phone'];
?>

<?php
$servername = "localhost";
$dbname = "profile";
$username = "root";
$password = "";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "UPDATE model SET name='$Name',gender='$Gender',gmail='$Mail',qualification='Qualification',hobbies='$Hobbies',phoneno='Phone'  WHERE name='$Name'";
if(mysqli_query($conn, $sql)) {
    echo "Record Updated successfully";
} else {
    echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);
?>

Step 5: After completing this Serve the ng to view the output of the project in a browser.