I can't connect my ionic app with a mysql database

fernando gonzalez 0
Viewed 36

In a project that I have to do I was copying some lines from a youtube project, trying to connect the login page to a mysql database. All the project is in a htdocs folder of xampp, also there is a server_api folder with a config.php (I describe its content below) and a file_aski.php (with nothing in it). Please any help would be great! Thanks.

The files that I describe below are:
config.php
app.module.ts
app.component.ts
app-routing.module.ts
login.page.ts
login.page.html

---------- config.php ----------

<?php
// setting config database
define('DB_NAME', 'dbtotalinspector');
define('DB_USER', 'root');
define('DB_PASSWORD', ''); // default
define('DB_HOST', 'localhost'); // default xampp
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
?>

---------- app.module.ts ----------

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
/* import { HttpModule } from '@angular/http';
import { PostProvider } from '../providers/post-provider';
import { IonicStorageModule } from '@ionic/storage-angular';
*/
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule /* , IonicStorageModule.forRoot(), PostProvider*/],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy } /*, PostProvider */ ],
  bootstrap: [AppComponent],
})
export class AppModule {}

---------- app.component.ts ----------

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {}
}

---------- app-routing.module.ts ----------

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'seleccionar-obra',
    loadChildren: () => import('./seleccionar-obra/seleccionar-obra.module').then( m => m.SeleccionarObraPageModule)
  },
  {
    path: 'cargar-obra',
    loadChildren: () => import('./cargar-obra/cargar-obra.module').then( m => m.CargarObraPageModule)
  },
  {
    path: 'cargar-item',
    loadChildren: () => import('./cargar-item/cargar-item.module').then( m => m.CargarItemPageModule)
  },
  {
    path: 'desplegar-items-de-obra',
    loadChildren: () => import('./desplegar-items-de-obra/desplegar-items-de-obra.module').then( m => m.DesplegarItemsDeObraPageModule)
  },
  {
    path: 'tomar-fotografia',
    loadChildren: () => import('./tomar-fotografia/tomar-fotografia.module').then( m => m.TomarFotografiaPageModule)
  },
  {
    path: 'generar-informe',
    loadChildren: () => import('./generar-informe/generar-informe.module').then( m => m.GenerarInformePageModule)
  },
  {
    path: 'confirmar-enviar-informe',
    loadChildren: () => import('./confirmar-enviar-informe/confirmar-enviar-informe.module').then( m => m.ConfirmarEnviarInformePageModule)
  },
  {
    path: 'desplegar-foto',
    loadChildren: () => import('./desplegar-foto/desplegar-foto.module').then( m => m.DesplegarFotoPageModule)
  },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

---------- login.page.ts ----------

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  constructor(private router: Router) { }
  ngOnInit() {
  }
  btnClickIngresar(){
    this.router.navigateByUrl('/home');
  }
}

---------- login.page.html ----------

<app-header></app-header>
<ion-content>
  <div class="container">
    <ion-card>
      <ion-card-header>
        <ion-card-title>Iniciar sesión</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-icon name="person-outline" slot="start"></ion-icon>
          <ion-item>
            <ion-label position="floating">Usuario</ion-label>
            <ion-input></ion-input>
          </ion-item>
        </ion-item>
        <ion-item>
          <ion-icon name="lock-open-outline" slot="start"></ion-icon>
          <ion-item>
            <ion-label position="floating">Contraseña</ion-label>
            <ion-input type="password"></ion-input>
          </ion-item>
        </ion-item>
          <ion-button expand="full" (click)="btnClickIngresar();">INGRESAR</ion-button>
      </ion-card-content>
      </ion-card>
    </div>
  </ion-content>
ionic-framework mysql authentication
1 Answers

Thanks for all the advices, I'm reading the guidelines. Ok, I see that I have to cut the code to the most importan parts. As I see, the main problem is in "post-providers.ts" and maybe in in "app.module.ts" too. I took out the code between /* */ I will show you how the code looks and the error messages.

post-providers.ts

// providers api
import { Injectable } from "@angular/core";
import { Http,Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class PostProvider {
    server: string = "http://localhost/server_api";
    
    constructor (public http: Http){

    }

    postData(body, file){
        
        let type = "application/json; charset=UTF-8";
        let headers = new Headers({ 'Content-Type': type });
        let options = new RequestOptions ({ headers: headers });

        return this.http.post(this.server + file, JSON.stringify(body), options)
        .map(res => res.json());

    }

}

NOTE: on ".map" of the code above it says "Property 'map' does not exist on type 'Observable'.ts(2339)"

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpModule } from '@angular/http';
import { PostProvider } from '../providers/post-provider';
import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot(), PostProvider, HttpModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, PostProvider ],
  bootstrap: [AppComponent],
})
export class AppModule {}

NOTE: in app.module.ts, the "HttpModule" is cross out (or strike out) in both, "import {}" and the imports inside @NgModule of The site appears in blank and it is compiled succesfully. But I don't see the login page.

THE ERRORS ARE:

./node_modules/rxjs/add/operator/map.js:7:0-39 - Error: Module not found: Error: Can't resolve 'rxjs-compat/add/operator/map' in 'C:\xampp\htdocs\totalinspector\node_modules\rxjs\add\operator'
[ng]
[ng] Error: src/providers/post-provider.ts:21:10 - error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
[ng]
[ng] 21         .map(res => res.json());
[ng]             ~~~
[ng] × Failed to compile.
fernando gonzalez0
Related