How To Create Login Api In Php Json

Flutter Online User Login using PHP MySQL API iOS Android Tutorial

In our previous tutorial we have learn about Online User Registration functionality. This tutorial is the second part of User Registration tutorial. In this tutorial we would perform Login functionality in Flutter mobile app. Login is basically used to perform authentication of app using via Email and Password. If app user dose not register himself then he did not access the Profile area. App user should have to login before accessing the Profile page. We are using MySQL database in our tutorial to storing the user registration records and also we are matching the Login details like Email and Password. We are using PHP(Hyper text pre processor) scripting language. So in this tutorial we would create Flutter Online User Login using PHP MySQL API iOS Android Tutorial.

What we are doing in current tutorial:

In this tutorial we're performing user login functionality using online PHP MySQL server and if the entered email and password matched then the user will redirect to profile activity screen. If the Login details is not matched then it would show us a Error message response coming from server in Alert dialog message.

Read our Online User Registration Tutorial First Before Getting Started.

Contents in this project Flutter Online User Login using PHP MySQL API iOS Android Example Tutorial:

1. Configure http.dart package for Flutter App:

1. We are using http.dart package in our both tutorials. This package is used to transfer data between client and server in JSON form. The http package did not come inbuilt with flutter project. We have to manually configure it into our Flutter project. So open your project's pubspec.yaml file.

2. Open the pubspec.yaml file in Code editor and find dependencies . Put http: ^0.12.0 in next line.

dependencies :

http : ^ 0.12.0

flutter :

sdk : flutter

3. Complete Source code for pubspec.yaml file:

name : app

description : A new Flutter project .

version : 1.0.0 + 1

environment :

sdk : ">=2.1.0 <3.0.0"

dependencies :

http : ^ 0.12.0

flutter :

sdk : flutter

cupertino_icons : ^ 0.1.2

dev_dependencies :

flutter_test :

sdk : flutter

flutter :

uses - material - design : true

4. After saving the pubspec.yaml file we have to open our Flutter project root folder in command prompt or Terminal and execute flutter pub get command. This command would download and install the added library package in your flutter project.

2. Creating PHP Script to Receive the Sent Email and Password From Flutter App:

1. We have to create a .php extension file named as login_user.php and put all the below code inside the file. Using this file we would first match the entered Email and Password and If entered details is correct then send a Login Matched text to app user so according to that user can navigate to profile screen. If the entered details is incorrect then it will send the app user a error response message.

Source code for login_user.php.

<?php

//Define your Server host name here.

$HostName = "localhost" ;

//Define your MySQL Database Name here.

$DatabaseName = "id11189654_flutter_db" ;

//Define your Database User Name here.

$HostUser = "id11189654_root" ;

//Define your Database Password here.

$HostPass = "1234567890" ;

// Creating MySQL Connection.

$con = mysqli_connect ( $HostName , $HostUser , $HostPass , $DatabaseName ) ;

// Getting the received JSON into $json variable.

$json = file_get_contents ( 'php://input' ) ;

// Decoding the received JSON and store into $obj variable.

$obj = json_decode ( $json , true ) ;

// Getting User email from JSON $obj array and store into $email.

$email = $obj [ 'email' ] ;

// Getting Password from JSON $obj array and store into $password.

$password = $obj [ 'password' ] ;

//Applying User Login query with email and password.

$loginQuery = "select * from user_registration where email = '$email' and password = '$password' " ;

// Executing SQL Query.

$check = mysqli_fetch_array ( mysqli_query ( $con , $loginQuery ) ) ;

if ( isset ( $check ) ) {

// Successfully Login Message.

$onLoginSuccess = 'Login Matched' ;

// Converting the message into JSON format.

$SuccessMSG = json_encode ( $onLoginSuccess ) ;

// Echo the message.

echo $SuccessMSG ;

}

else {

// If Email and Password did not Matched.

$InvalidMSG = 'Invalid Username or Password Please Try Again' ;

// Converting the message into JSON format.

$InvalidMSGJSon = json_encode ( $InvalidMSG ) ;

// Echo the message.

echo $InvalidMSGJSon ;

}

mysqli_close ( $con ) ;

2. We would upload this file to our online hosting server. We have a testing sub domain named as https : //flutter-examples.000webhostapp.com/ connecting with Web hosting. We would upload this file to our hosting using File manger. After uploading the file to our server the API url will look like this: https : //flutter-examples.000webhostapp.com/login_user.php . We would use this complete URL in our flutter app.

3. Start Coding for App:

1. Import material.dart, Convert and http.dart package in your flutter project's main.dart file.

import 'package:flutter/material.dart' ;

import 'dart:convert' ;

import 'package:http/http.dart' as http ;

2. Create our void main runApp() method and call our First MyApp screen class using home property.

void main ( ) = > runApp (

MaterialApp (

home : MyApp ( ) ,

)

) ;

3. Create our main root class named as MyApp extends with State less widget. In this class we would call the LoginUser() class.

class MyApp extends StatelessWidget {

@ override

Widget build ( BuildContext context ) {

return MaterialApp (

home : Scaffold (

appBar : AppBar ( title : Text ( 'User Login Form' ) ) ,

body : Center (

child : LoginUser ( )

)

) ;

}

4. Create a class named as LoginUser extends with State full widget. In this class we would make the createState() method and pass the LoginUserState class. This method would enable the mutable state management in given class tree.

class LoginUser extends StatefulWidget {

LoginUserState createState ( ) = > LoginUserState ( ) ;

}

5. Create our main class named as LoginUserState extends with State. In this class we would make all the Text Field widgets and the Login form is created in this class.

class LoginUserState extends State {

}

5. Create a Boolean variable named as visible with default false value. We would use this boolean variable to show and hide the Circular Progress Indicator in LoginUserState class.

// For CircularProgressIndicator.

bool visible = false ;

6. Creating twoTextEditingController() object with final data type. We would use these objects to retrieve the entered text in Text Field widget in LoginUserState class.

// Getting value from TextField widget.

final emailController = TextEditingController ( ) ;

final passwordController = TextEditingController ( ) ;

7. Creating a Future type Async function named as userLogin() in LoginUserState class. We would perform the API web call using this method. We would call this function on button onPress event. In this function first we would perform the Web call and if the response coming from server is same as Login Matched then it would login the user and navigate to Profile activity screen. We would also send the Entered email address to profile activity on Success login.

Future userLogin ( ) async {

// Showing CircularProgressIndicator.

setState ( ( ) {

visible = true ;

} ) ;

// Getting value from Controller

String email = emailController . text ;

String password = passwordController . text ;

// SERVER LOGIN API URL

var url = 'https://flutter-examples.000webhostapp.com/login_user.php' ;

// Store all data with Param Name.

var data = { 'email' : email , 'password' : password } ;

// Starting Web API Call.

var response = await http . post ( url , body : json . encode ( data ) ) ;

// Getting Server response into variable.

var message = jsonDecode ( response . body ) ;

// If the Response Message is Matched.

if ( message == 'Login Matched' )

{

// Hiding the CircularProgressIndicator.

setState ( ( ) {

visible = false ;

} ) ;

// Navigate to Profile Screen & Sending Email to Next Screen.

Navigator . push (

context ,

MaterialPageRoute ( builder : ( context ) = > ProfileScreen ( email : emailController . text ) )

) ;

} else {

// If Email or Password did not Matched.

// Hiding the CircularProgressIndicator.

setState ( ( ) {

visible = false ;

} ) ;

// Showing Alert Dialog with Response JSON Message.

showDialog (

context : context ,

builder : ( BuildContext context ) {

return AlertDialog (

title : new Text ( message ) ,

actions : < Widget > [

FlatButton (

child : new Text ( "OK" ) ,

onPressed : ( ) {

Navigator . of ( context ) . pop ( ) ;

} ,

) ,

] ,

) ;

} ,

) ; }

}

8. Creating 2 Text Input Text Field widget with 1 Raised button in Widget build area in LoginUserState class.

Widget build ( BuildContext context ) {

return Scaffold (

body : SingleChildScrollView (

child : Center (

child : Column (

children : < Widget > [

Padding (

padding : const EdgeInsets . all ( 12.0 ) ,

child : Text ( 'User Login Form' ,

style : TextStyle ( fontSize : 21 ) ) ) ,

Divider ( ) ,

Container (

width : 280 ,

padding : EdgeInsets . all ( 10.0 ) ,

child : TextField (

controller : emailController ,

autocorrect : true ,

decoration : InputDecoration ( hintText : 'Enter Your Email Here' ) ,

)

) ,

Container (

width : 280 ,

padding : EdgeInsets . all ( 10.0 ) ,

child : TextField (

controller : passwordController ,

autocorrect : true ,

obscureText : true ,

decoration : InputDecoration ( hintText : 'Enter Your Password Here' ) ,

)

) ,

RaisedButton (

onPressed : userLogin ,

color : Colors . green ,

textColor : Colors . white ,

padding : EdgeInsets . fromLTRB ( 9 , 9 , 9 , 9 ) ,

child : Text ( 'Click Here To Login' ) ,

) ,

Visibility (

visible : visible ,

child : Container (

margin : EdgeInsets . only ( bottom : 30 ) ,

child : CircularProgressIndicator ( )

)

) ,

] ,

) ,

) ) ) ;

}

Complete Source Code for LoginUserState class:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

class LoginUserState extends State {

// For CircularProgressIndicator.

bool visible = false ;

// Getting value from TextField widget.

final emailController = TextEditingController ( ) ;

final passwordController = TextEditingController ( ) ;

Future userLogin ( ) async {

// Showing CircularProgressIndicator.

setState ( ( ) {

visible = true ;

} ) ;

// Getting value from Controller

String email = emailController . text ;

String password = passwordController . text ;

// SERVER LOGIN API URL

var url = 'https://flutter-examples.000webhostapp.com/login_user.php' ;

// Store all data with Param Name.

var data = { 'email' : email , 'password' : password } ;

// Starting Web API Call.

var response = await http . post ( url , body : json . encode ( data ) ) ;

// Getting Server response into variable.

var message = jsonDecode ( response . body ) ;

// If the Response Message is Matched.

if ( message == 'Login Matched' )

{

// Hiding the CircularProgressIndicator.

setState ( ( ) {

visible = false ;

} ) ;

// Navigate to Profile Screen & Sending Email to Next Screen.

Navigator . push (

context ,

MaterialPageRoute ( builder : ( context ) = > ProfileScreen ( email : emailController . text ) )

) ;

} else {

// If Email or Password did not Matched.

// Hiding the CircularProgressIndicator.

setState ( ( ) {

visible = false ;

} ) ;

// Showing Alert Dialog with Response JSON Message.

showDialog (

context : context ,

builder : ( BuildContext context ) {

return AlertDialog (

title : new Text ( message ) ,

actions : < Widget > [

FlatButton (

child : new Text ( "OK" ) ,

onPressed : ( ) {

Navigator . of ( context ) . pop ( ) ;

} ,

) ,

] ,

) ;

} ,

) ; }

}

@ override

Widget build ( BuildContext context ) {

return Scaffold (

body : SingleChildScrollView (

child : Center (

child : Column (

children : < Widget > [

Padding (

padding : const EdgeInsets . all ( 12.0 ) ,

child : Text ( 'User Login Form' ,

style : TextStyle ( fontSize : 21 ) ) ) ,

Divider ( ) ,

Container (

width : 280 ,

padding : EdgeInsets . all ( 10.0 ) ,

child : TextField (

controller : emailController ,

autocorrect : true ,

decoration : InputDecoration ( hintText : 'Enter Your Email Here' ) ,

)

) ,

Container (

width : 280 ,

padding : EdgeInsets . all ( 10.0 ) ,

child : TextField (

controller : passwordController ,

autocorrect : true ,

obscureText : true ,

decoration : InputDecoration ( hintText : 'Enter Your Password Here' ) ,

)

) ,

RaisedButton (

onPressed : userLogin ,

color : Colors . green ,

textColor : Colors . white ,

padding : EdgeInsets . fromLTRB ( 9 , 9 , 9 , 9 ) ,

child : Text ( 'Click Here To Login' ) ,

) ,

Visibility (

visible : visible ,

child : Container (

margin : EdgeInsets . only ( bottom : 30 ) ,

child : CircularProgressIndicator ( )

)

) ,

] ,

) ,

) ) ) ;

}

Screenshot:

9. Create another class named as ProfileScreen extends StatelessWidget. This screen will only be show if user successfully logged in.

class ProfileScreen extends StatelessWidget {

}

10. Create a String variable named as email in ProfileScreen class.

// Creating String Var to Hold sent Email.

final String email ;

11. Creating constructor() in ProfileScreen class and receive the sent email in email string variable.

/ Receiving Email using Constructor .

ProfileScreen ( { Key key , @ required this . email } ) : super ( key : key ) ;

12. Creating a function named as logout(). We would call this function on Button onPress.

// User Logout Function.

logout ( BuildContext context ) {

Navigator . pop ( context ) ;

}

13. Creating 1 Text widget and 1 Raised button widget in Widget build area in ProfileScreen class.

Widget build ( BuildContext context ) {

return MaterialApp (

home : Scaffold (

appBar : AppBar ( title : Text ( 'Profile Screen' ) ,

automaticallyImplyLeading : false ) ,

body : Center (

child : Column ( children : < Widget > [

Container (

width : 280 ,

padding : EdgeInsets . all ( 10.0 ) ,

child : Text ( 'Email = ' + '\n' + email ,

style : TextStyle ( fontSize : 20 ) )

) ,

RaisedButton (

onPressed : ( ) {

logout ( context ) ;

} ,

color : Colors . red ,

textColor : Colors . white ,

child : Text ( 'Click Here To Logout' ) ,

) ,

] , )

)

) ;

}

Screenshot:

14. Complete source code formain.dart file:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

import 'package:flutter/material.dart' ;

import 'dart:convert' ;

import 'package:http/http.dart' as http ;

void main ( ) = > runApp (

MaterialApp (

home : MyApp ( ) ,

)

) ;

class MyApp extends StatelessWidget {

@ override

Widget build ( BuildContext context ) {

return MaterialApp (

home : Scaffold (

appBar : AppBar ( title : Text ( 'User Login Form' ) ) ,

body : Center (

child : LoginUser ( )

)

) ;

}

class LoginUser extends StatefulWidget {

LoginUserState createState ( ) = > LoginUserState ( ) ;

}

class LoginUserState extends State {

// For CircularProgressIndicator.

bool visible = false ;

// Getting value from TextField widget.

final emailController = TextEditingController ( ) ;

final passwordController = TextEditingController ( ) ;

Future userLogin ( ) async {

// Showing CircularProgressIndicator.

setState ( ( ) {

visible = true ;

} ) ;

// Getting value from Controller

String email = emailController . text ;

String password = passwordController . text ;

// SERVER LOGIN API URL

var url = 'https://flutter-examples.000webhostapp.com/login_user.php' ;

// Store all data with Param Name.

var data = { 'email' : email , 'password' : password } ;

// Starting Web API Call.

var response = await http . post ( url , body : json . encode ( data ) ) ;

// Getting Server response into variable.

var message = jsonDecode ( response . body ) ;

// If the Response Message is Matched.

if ( message == 'Login Matched' )

{

// Hiding the CircularProgressIndicator.

setState ( ( ) {

visible = false ;

} ) ;

// Navigate to Profile Screen & Sending Email to Next Screen.

Navigator . push (

context ,

MaterialPageRoute ( builder : ( context ) = > ProfileScreen ( email : emailController . text ) )

) ;

} else {

// If Email or Password did not Matched.

// Hiding the CircularProgressIndicator.

setState ( ( ) {

visible = false ;

} ) ;

// Showing Alert Dialog with Response JSON Message.

showDialog (

context : context ,

builder : ( BuildContext context ) {

return AlertDialog (

title : new Text ( message ) ,

actions : < Widget > [

FlatButton (

child : new Text ( "OK" ) ,

onPressed : ( ) {

Navigator . of ( context ) . pop ( ) ;

} ,

) ,

] ,

) ;

} ,

) ; }

}

@ override

Widget build ( BuildContext context ) {

return Scaffold (

body : SingleChildScrollView (

child : Center (

child : Column (

children : < Widget > [

Padding (

padding : const EdgeInsets . all ( 12.0 ) ,

child : Text ( 'User Login Form' ,

style : TextStyle ( fontSize : 21 ) ) ) ,

Divider ( ) ,

Container (

width : 280 ,

padding : EdgeInsets . all ( 10.0 ) ,

child : TextField (

controller : emailController ,

autocorrect : true ,

decoration : InputDecoration ( hintText : 'Enter Your Email Here' ) ,

)

) ,

Container (

width : 280 ,

padding : EdgeInsets . all ( 10.0 ) ,

child : TextField (

controller : passwordController ,

autocorrect : true ,

obscureText : true ,

decoration : InputDecoration ( hintText : 'Enter Your Password Here' ) ,

)

) ,

RaisedButton (

onPressed : userLogin ,

color : Colors . green ,

textColor : Colors . white ,

padding : EdgeInsets . fromLTRB ( 9 , 9 , 9 , 9 ) ,

child : Text ( 'Click Here To Login' ) ,

) ,

Visibility (

visible : visible ,

child : Container (

margin : EdgeInsets . only ( bottom : 30 ) ,

child : CircularProgressIndicator ( )

)

) ,

] ,

) ,

) ) ) ;

}

class ProfileScreen extends StatelessWidget {

// Creating String Var to Hold sent Email.

final String email ;

// Receiving Email using Constructor.

ProfileScreen ( { Key key , @ required this . email } ) : super ( key : key ) ;

// User Logout Function.

logout ( BuildContext context ) {

Navigator . pop ( context ) ;

}

@ override

Widget build ( BuildContext context ) {

return MaterialApp (

home : Scaffold (

appBar : AppBar ( title : Text ( 'Profile Screen' ) ,

automaticallyImplyLeading : false ) ,

body : Center (

child : Column ( children : < Widget > [

Container (

width : 280 ,

padding : EdgeInsets . all ( 10.0 ) ,

child : Text ( 'Email = ' + '\n' + email ,

style : TextStyle ( fontSize : 20 ) )

) ,

RaisedButton (

onPressed : ( ) {

logout ( context ) ;

} ,

color : Colors . red ,

textColor : Colors . white ,

child : Text ( 'Click Here To Logout' ) ,

) ,

] , )

)

) ;

}

Screenshots:

Flutter Online User Login using PHP MySQL API iOS Android Tutorial