pHp backend with flutter

Hey guys on this article I am going to show you the step by step process that will enable you to connect your flutter app to a web server!

Learn — Unlearn — Relearn

Configure your web server

Let’s agree that the first step, to connect to a web server is to have a web server :D, well if you have your own server already, thats good

configure the webserver

Create MYSQL db ,create a database name, a username (for the database) and finally a password, make user you save this information because we are going to need it afterward

Now, after your database is created, go ahead and hit Manage -> phpmyadmin

3. now lets create a table on your database

Select the database you just created and then hit new to create a new table on your database

user the above attributes on the table that you are going to create, and finally insert some dummy values into the table, those values are the ones that we will retrieve from our flutter app.

After, you inserted the dummy data this is how the table will look like

Now let’s connect our app to our server

To do that we will need to create a file that is going to handle the connection with the server.page you will create two files, one called db.php and the other called get.php,

now select the file db.php, and edit its contents, the code will look like this:

<?php$dns = ‘mysql:host=localhost;dbname=enter-database-name’;
$user = ‘enter-username’;
$password = ‘enter_the_password_of_your_database’;try{
 $db = new PDO ($dns, $user, $pass);
}catch( PDOException $e){
 $error = $e->getMessage();
 echo $error;
}

Make sure to enter the correct credentials, or else you will get an error, from the home page, go to the manage databases window to get the correct credentials like database name and user name! $db = new PDO ($dns, $user, $pass); will create a PDO object and will establish the db connection, in case there is an error it will be thrown to the catch block

now select the get.php file, and edit its contents, the code is:

<?php
require_once('db.php');
$query = 'SELECT * FROM posts';
$stm = $db->prepare($query);
$stm->execute();
$row = $stm->fetch(PDO::FETCH_ASSOC);
echo json_encode($row);

here we first require the db.php file, to establish connection with our databse, the we create a variable $query that is going to query our database table, then we use the PDO command $stm = $db->prepare($query) to make sure that our query is error free, and finally we user $stm->execute(); to execute the query, then $row = $stm->fetch(PDO::FETCH_ASSOC); will assign to the variable row the content of the table in the form of an associative array, echo json_encode($row); will display the response in the json format.

Now lets create our flutter app

we will create a simple flutter app with the following code

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Server',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(title: 'Flutter Server App'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
    );
  }
}

The above code will give you the basic app structure

Lets create the method to get the contents of our table on the server

Future getData() async{
    var url = 'https://serverurl/get.php';
    http.Response response = await http.get(url);
    var data = jsonDecode(response.body);
    print(data.toString());
  }

This code will get the content from our table and print it on the terminal, note that the method must be of type future and it must be asynchronous,

the url, that you have to provide on your code is your url/get.php

now we will call the method from the initial state

@override
  void initState() {
    getData();
  }

the complete code will look like this

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Server',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(title: 'Flutter Server App'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
    );
  }
  Future getData() async{
    var url = 'https://serverurl/get.php';
    http.Response response = await http.get(url);
    var data = jsonDecode(response.body);
    print(data.toString());
  }
  @override
  void initState() {
    getData();
  }
}

Thank you for reading!

Connect with me:
Twitter: https://twitter.com/japangor/
Instagram: https://instagram.com/japangor/
LinkedIn: https://www.linkedin.com/in/japan-gor-50587b30/

Founder: GJAM