Flutter Dasar

Pertemuan #6

Toko Kopi Haqiqi Cilebut, 10 Agustus 2019

oleh : k4ilham & LT

Login API

Model : M_Karyawan

	 function cekUser($userName=null){
		 $this->db->select('*');
		 $this->db->from('viewKaryawan');
		 $this->db->where('viewKaryawan.userName',$userName);
		 $this->db->limit(1);
		 return $this->db->get();
	 }

Tambahkan Fuction cekUser

Controller : Login

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
require APPPATH . '/libraries/REST_Controller.php';
require APPPATH . '/libraries/php-jwt-master/src/JWT.php';

use \Firebase\JWT\JWT;
use Restserver\Libraries\REST_Controller;

class Login extends REST_Controller {
    
	//INIT
   function __construct() {
        parent::__construct();
        $this->load->database();
        $this->load->model('M_Karyawan');
   }


    //GET
   public function index_get(){	   
        //PARAMETER
        $userName = $this->get('userName');
        $userPass = md5($this->get('userPass'));
        $token = $this->get('token');


        //CEK USER
        $data = $this->M_Karyawan->cekUser($userName);
        if($data->row()){
          //AMBIL DATA
          $userLevel = $data->row()->userLevel; 
          $userStatus = $data->row()->userStatus;   
          $userToken = $data->row()->userToken;   
          $userPassData = $data->row()->userPass;   

          //CEK PASSWORD
          if($userPass==$userPassData){
                //CEK STATUS
                if($userStatus){
                        //CEK LEVEL
                        if($userLevel=="1"){
                                //CEK TOKEN
                                if($userToken == $token){
                                        $this->response([
                                                        'id' => 'api_pusat1.0',
                                                        'status' => true,
                                                        'message' => 'User found',
                                                        'total' => $data->num_rows(),
                                                        'data' => $data->result_array(),
                                        ], REST_Controller::HTTP_OK);
                                }else{
                                        $this->response([
                                                        'id' => 'api_pusat1.0',
                                                        'status' => false,
                                                        'message' => 'Invalid Token',
                                        ], REST_Controller::HTTP_OK);
                                }

                        }else{
                                $this->response([
                                                'id' => 'api_pusat1.0',
                                                'status' => false,
                                                'message' => 'Invalid Level',
                                ], REST_Controller::HTTP_OK);
                        }
                }else{
                        $this->response([
                                        'id' => 'api_pusat1.0',
                                        'status' => false,
                                        'message' => 'User Nonaktif',
                        ], REST_Controller::HTTP_OK);
                }
          }else{
                $this->response([
                                'id' => 'api_pusat1.0',
                                'status' => false,
                                'message' => 'Invalid Password',
                ], REST_Controller::HTTP_OK);
          }


        }else{

                $this->response([
                                'id' => 'api_pusat1.0',
                                'status' => false,
                                'message' => 'User Not found',
                ], REST_Controller::HTTP_OK);
        }


   }
	


	
}

Database

postman

cek status & Token

Flutter VS Code

Form & TextFormField

validation form

main.dart

import 'package:flutter/material.dart';
import 'login.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: Login(),
    );
  }
}

login.dart

import 'package:flutter/material.dart';

class Login extends StatefulWidget {
  Login({Key key}) : super(key: key);

  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {

  final formKey = GlobalKey<FormState>();
  String name='';
  String pass='';

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Login Form'),
      ),
      body: Form(
        key: formKey,
        child: Column(
          children: <Widget>[
            _username(context),
            _password(context),
            _buttonLogin(context),
          ],
        ),
      ),
    );
  }


  String validatePass(String value){
    if(value.length < 4){
      return 'Password Minimal 4 Karakter';
    }
    return null;
  }

  String validateUser(String value){
    if(value.isEmpty){
      return 'Username harus diisi';
    }
    return null;
  }

  void submit(){
    if(formKey.currentState.validate()){
      formKey.currentState.save();
      print('Username : $name');
      print('Password : $pass');
    }
  }


  Widget _username(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: TextFormField(
        validator: validateUser,
        onSaved: (String value){
          name = value;
        },
        key: Key('username'),
        decoration:
            InputDecoration(hintText: 'username', labelText: 'username'),
        style: TextStyle(fontSize: 20.0, color: Colors.black),
      ),
    );
  }

  Widget _password(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: TextFormField(
        validator: validatePass,
        onSaved: (String value){
          pass = value;
        },
        key: Key('password'),
        decoration:
            InputDecoration(hintText: 'password', labelText: 'password'),
        style: TextStyle(fontSize: 20.0, color: Colors.black),
        obscureText: true,
      ),
    );
  }

  Widget _buttonLogin(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: new InkWell(
        onTap: (){
          submit();
        },
        child: new Container(
          //width: 100.0,
          height: 50.0,
          decoration: new BoxDecoration(
            color: Colors.blueAccent,
            border: new Border.all(color: Colors.white, width: 2.0),
            borderRadius: new BorderRadius.circular(10.0),
          ),
          child: new Center(
            child: new Text(
              'Login',
              style: new TextStyle(fontSize: 18.0, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Dummy Login

SharedPreferences

SharedPreferences

name: flutter_login
description: A new Flutter project.

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  shared_preferences: ^0.5.3+4

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

pubspec.yaml

login.dart

import 'package:flutter/material.dart';
import 'home.dart';
import 'package:shared_preferences/shared_preferences.dart';

class Login extends StatefulWidget {
  Login({Key key}) : super(key: key);

  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  final formKey = GlobalKey<FormState>();
  //snackbar
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  final nameController = TextEditingController();
  final passController = TextEditingController();

  String name = '';
  String pass = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: Text('Login Form'),
      ),
      body: Form(
        key: formKey,
        child: Column(
          children: <Widget>[
            _username(context),
            _password(context),
            _buttonLogin(context),
          ],
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _cekLogin();
  }

  Future _cekLogin() async{
        //SHAREDPREFERENCES
    SharedPreferences pref = await SharedPreferences.getInstance();
    if (pref.getBool("isLogin")) {
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => new Home()));
    }
  }

  String validatePass(String value) {
    if (value.length < 4) {
      return 'Password Minimal 4 Karakter';
    }
    return null;
  }

  String validateUser(String value) {
    if (value.isEmpty) {
      return 'Username harus diisi';
    }
    return null;
  }

  void submit() async {
    if (formKey.currentState.validate()) {
      formKey.currentState.save();
      print(nameController.value.text);

      if (nameController.value.text == "2001") {
        if (passController.value.text == "12345678") {
          //SHAREDPREFERENCES
          SharedPreferences pref = await SharedPreferences.getInstance();
          pref.setBool("isLogin", true);
          pref.setString("userName", nameController.value.text);
          //pindah ke home
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => new Home()));
        } else {
          //SHAREDPREFERENCES
          SharedPreferences pref = await SharedPreferences.getInstance();
          pref.setBool("isLogin", false);

          SnackBar snackBar2 = SnackBar(
            content: Text(
              'Invalid Password',
              style: TextStyle(color: Colors.white),
            ),
            backgroundColor: Colors.green,
          );
          scaffoldKey.currentState.showSnackBar(snackBar2);
        }
      } else {
        //SHAREDPREFERENCES
        SharedPreferences pref = await SharedPreferences.getInstance();
        pref.setBool("isLogin", false);

        SnackBar snackBar2 = SnackBar(
          content: Text(
            'Invalid User',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.green,
        );
        scaffoldKey.currentState.showSnackBar(snackBar2);
      }
    }
  }

  Widget _username(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: TextFormField(
        controller: nameController,
        validator: validateUser,
        onSaved: (String value) {
          name = value;
        },
        key: Key('username'),
        decoration:
            InputDecoration(hintText: 'username', labelText: 'username'),
        style: TextStyle(fontSize: 20.0, color: Colors.black),
      ),
    );
  }

  Widget _password(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: TextFormField(
        controller: passController,
        validator: validatePass,
        onSaved: (String value) {
          pass = value;
        },
        key: Key('password'),
        decoration:
            InputDecoration(hintText: 'password', labelText: 'password'),
        style: TextStyle(fontSize: 20.0, color: Colors.black),
        obscureText: true,
      ),
    );
  }

  Widget _buttonLogin(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: new InkWell(
        onTap: () {
          submit();
        },
        child: new Container(
          //width: 100.0,
          height: 50.0,
          decoration: new BoxDecoration(
            color: Colors.blueAccent,
            border: new Border.all(color: Colors.white, width: 2.0),
            borderRadius: new BorderRadius.circular(10.0),
          ),
          child: new Center(
            child: new Text(
              'Login',
              style: new TextStyle(fontSize: 18.0, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'login.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: Login(),
    );
  }
}

home.dart

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'login.dart';

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  String nama = "";

  Future _cekLogin() async{
        //SHAREDPREFERENCES
    SharedPreferences pref = await SharedPreferences.getInstance();
    if (pref.getBool("isLogin")==false) {
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => new Login()));
    }
  }

   Future _Logout() async{
        //SHAREDPREFERENCES
    SharedPreferences pref = await SharedPreferences.getInstance();
    pref.setBool("isLogin", false);

    Navigator.push(
    context, MaterialPageRoute(builder: (context) => new Login()));
  }

  Future _cekUser() async{
        //SHAREDPREFERENCES
    SharedPreferences pref = await SharedPreferences.getInstance();
    if (pref.getString("userName")!=null) {
      setState(() {
        nama =  pref.getString("userName");
      });
    }
  }

  @override
  void initState() { 
    super.initState();
    _cekUser();
    _cekLogin();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Halaman Home"),),
      body: Center(
        child: Column(
          children: <Widget>[

            //TEXT
              Text("Welcome :" + nama),
            //BUTTON
              _buttonLogout(context),
              
          ],
        )
      ),
    );
  }

    Widget _buttonLogout(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: new InkWell(
        onTap: () {
          _Logout();
        },
        child: new Container(
          //width: 100.0,
          height: 50.0,
          decoration: new BoxDecoration(
            color: Colors.blueAccent,
            border: new Border.all(color: Colors.white, width: 2.0),
            borderRadius: new BorderRadius.circular(10.0),
          ),
          child: new Center(
            child: new Text(
              'Logout',
              style: new TextStyle(fontSize: 18.0, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

}

ModalProgress

import 'package:flutter/material.dart';
import 'home.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:modal_progress_hud/modal_progress_hud.dart';

class Login extends StatefulWidget {
  Login({Key key}) : super(key: key);

  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  final formKey = GlobalKey<FormState>();
  //snackbar
  final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
  final nameController = TextEditingController();
  final passController = TextEditingController();

  bool _isInAsyncCall = false;

  String name = '';
  String pass = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: Text('Login Form'),
      ),
      body: ModalProgressHUD(
        inAsyncCall: _isInAsyncCall,
        opacity: 0.5,
        progressIndicator: CircularProgressIndicator(),
        child: Form(
          key: formKey,
          child: Column(
            children: <Widget>[
              _username(context),
              _password(context),
              _buttonLogin(context),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _cekLogin();
  }

  Future _cekLogin() async {
    //SHAREDPREFERENCES
    SharedPreferences pref = await SharedPreferences.getInstance();
    if (pref.getBool("isLogin")) {
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => new Home()));
    }
  }

  String validatePass(String value) {
    if (value.length < 4) {
      return 'Password Minimal 4 Karakter';
    }
    return null;
  }

  String validateUser(String value) {
    if (value.isEmpty) {
      return 'Username harus diisi';
    }
    return null;
  }

  void submit() async {

    if (formKey.currentState.validate()) {
      formKey.currentState.save();
      print(nameController.value.text);

      // dismiss keyboard during async call
      FocusScope.of(context).requestFocus(new FocusNode());
      // start the modal progress HUD
      setState(() {
        _isInAsyncCall = true;
      });
      // Simulate a service call
      Future.delayed(Duration(seconds: 1), () async {

            if (nameController.value.text == "2001") {
                if (passController.value.text == "12345678") {
                  //SHAREDPREFERENCES
                  SharedPreferences pref = await SharedPreferences.getInstance();
                  pref.setBool("isLogin", true);
                  pref.setString("userName", nameController.value.text);

                  setState(() {
                   _isInAsyncCall = false; 
                  });

                  //pindah ke home
                  Navigator.push(
                      context, MaterialPageRoute(builder: (context) => new Home()));
                } else {
                  //SHAREDPREFERENCES
                  SharedPreferences pref = await SharedPreferences.getInstance();
                  pref.setBool("isLogin", false);

                  setState(() {
                   _isInAsyncCall = false; 
                  });

                  SnackBar snackBar2 = SnackBar(
                    content: Text(
                      'Invalid Password',
                      style: TextStyle(color: Colors.white),
                    ),
                    backgroundColor: Colors.green,
                  );
                  scaffoldKey.currentState.showSnackBar(snackBar2);
                }
              } else {
                //SHAREDPREFERENCES
                SharedPreferences pref = await SharedPreferences.getInstance();
                pref.setBool("isLogin", false);

                 setState(() {
                   _isInAsyncCall = false; 
                 });

                SnackBar snackBar2 = SnackBar(
                  content: Text(
                    'Invalid User',
                    style: TextStyle(color: Colors.white),
                  ),
                  backgroundColor: Colors.green,
                );
                scaffoldKey.currentState.showSnackBar(snackBar2);
              }

      });

 
    }
  }

  Widget _username(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: TextFormField(
        controller: nameController,
        validator: validateUser,
        onSaved: (String value) {
          name = value;
        },
        key: Key('username'),
        decoration:
            InputDecoration(hintText: 'username', labelText: 'username'),
        style: TextStyle(fontSize: 20.0, color: Colors.black),
      ),
    );
  }

  Widget _password(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: TextFormField(
        controller: passController,
        validator: validatePass,
        onSaved: (String value) {
          pass = value;
        },
        key: Key('password'),
        decoration:
            InputDecoration(hintText: 'password', labelText: 'password'),
        style: TextStyle(fontSize: 20.0, color: Colors.black),
        obscureText: true,
      ),
    );
  }

  Widget _buttonLogin(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(8.0),
      child: new InkWell(
        onTap: () {
          submit();
        },
        child: new Container(
          //width: 100.0,
          height: 50.0,
          decoration: new BoxDecoration(
            color: Colors.blueAccent,
            border: new Border.all(color: Colors.white, width: 2.0),
            borderRadius: new BorderRadius.circular(10.0),
          ),
          child: new Center(
            child: new Text(
              'Login',
              style: new TextStyle(fontSize: 18.0, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

meetap_flutter_basic_06

By Maulana Ilham

meetap_flutter_basic_06

meetap_flutter_basic_06

  • 777