Herkese merhaba, kurnazwebci.com’a hoş geldiniz. Bu yazımda sizlere Angular 10 ile mysql veritabanı çalışma örneğini anlatacağım .

Angular 10 ile ilgili birçok gönderi paylaştım ve hepiniz onu çok sevdiniz, bu yüzden bugün Angular 10 ve php mysql veritabanı kombinasyonu ile ilgili yeni bir gönderi buldum.

Bu yazıda php mysql veritabanından Angular 10’e veri alıyorum.

Angular 10’de php mysql verileri

İşte eksiksiz kod parçacıkları ve lütfen bunların hepsini dosyalarınıza çok dikkatli bir şekilde ekleyin:

1. BAŞLAYALIM, İŞTE ANGULAR 10’İ BİLGİSAYARINIZA AYARLAMAK İÇİN TEMEL KOMUTLAR:

npm install -g @ angular / cli

2. ANGULAR8PHPMYADMİNDATABSE KLASÖRÜNE GİRDİKTEN SONRA, LÜTFEN AŞAĞIDAKİ KODU ANGULAR10PHPMYADMİNDATABSE \ SRC \ APP \ APP.MODULE.TS DOSYASINA EKLEYİN:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. ŞİMDİ AŞAĞIDAKİ KODU ANGULAR10PHPMYADMİNDATABSE \ SRC \ APP \ APP.COMPONENT.TS DOSYASINA EKLEYİN:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular10phpmyadmindatabse';
  data = [];
  constructor(private http: HttpClient) {
    this.http.get('http://localhost/deneme.php').subscribe(data => {
    this.data.push(data);
    console.log(this.data);
   
    
    }, error => console.error(error));
  }
}

4. ŞİMDİ AŞAĞIDAKİ KODU ANGULAR10PHPMYADMİNDATABSE \ SRC \ APP \ APP.COMPONENT.HTML DOSYASINA EKLEYİN:

<table>
  <tr>
    <th> Ad </th>
    <th> E-posta </th>
    
  </tr>
  <tr *ngFor="let mydata of data[0]">
    <td>{{mydata.name}}</td>
    <td>{{mydata.email}}</td>
  </tr>
</table>

5. İYİ GÖRÜNÜM İÇİN AŞAĞIDAKİ KODU APP.COMPONENT.CSS DOSYASINA EKLEYİN:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }

6. SON OLARAK, MYSQL VERİLERİ İÇİN, LÜTFEN AŞAĞIDAKİ KODU HTDOCS KLASÖRÜNÜZDEKİ DENEME.PHP DOSYASINA EKLEYİN VE XAMPP’NİZİ BAŞLATMAYI UNUTMAYIN:

<?php
$servername = "localhost";
$username   = "root";
$password   = "";
$dbname     = "deneme";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
  //echo "Başarılı Bağlantı";
$sql = "SELECT * FROM deneme";
$result = mysqli_query($conn,$sql); 
$myArray = array();
if ($result->num_rows > 0) {
// output data of each row
    while($row = $result->fetch_assoc()) {
        $myArray[] = $row;
    }
    print json_encode($myArray);
} 
else 
{
    echo "0 SATIR";
}

Sonunda, terminalinize hizmet komutunu çalıştırmayı unutmayın .

Bu gönderiyle veya Angular ile ilgili herhangi bir sorunuz varsa, lütfen benimle iletişime geçin veya aşağıya yorum yapın.