Tuesday, January 3, 2023

Membuat Form Login & Register Dengan Flutter

 



Buatlah package dan file seperti tampilan dibawah ini :


1. main.dart

import 'package:flutter/material.dart';

import 'package:login_register/ui_view/login.dart';

import 'package:login_register/ui_view/signup.dart';

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

class MyApp extends StatelessWidget {

 // This widget is the root of your application.

 @override

 Widget build(BuildContext context) {

   return MaterialApp(

     title: 'Login Regiter',

     theme: ThemeData(

       primarySwatch: Colors.blue,

     ),

     home: HomePage(),

   );

 }

}

class HomePage extends StatelessWidget {

 Widget build(BuildContext context) {

   return Scaffold(

     backgroundColor: Colors.lightBlue,

     body: Center(

       child: Column(

         mainAxisAlignment: MainAxisAlignment.center,

         children: <Widget>[

           Icon(Icons.android, color: Colors.white, size: 45,),

           SizedBox(height: 200,),

           Text("Welcome to Flutter",

               style: TextStyle(color: Colors.white, fontSize: 22)),

           SizedBox(height: 10,),

           Text("Get real-time updates about what",

             style: TextStyle(color: Colors.white, fontSize: 18),),

           Text("maters to you",

             style: TextStyle(color: Colors.white, fontSize: 18),),

           SizedBox(height: 18,),

           MaterialButton(

             minWidth: 210,

             color: Colors.white,

             textColor: Colors.lightBlue,

             child: Text("Sign Up",

               style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),),

             onPressed: () {

               Navigator.push(context, MaterialPageRoute(builder: (context) => SignUp()));

             },

           ),

           TextButton(

             child: Text("Log In", style: TextStyle(color: Colors.white,

                 fontWeight: FontWeight.bold,

                 fontSize: 18),),

             onPressed: () {

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

             },

           )

         ],

       ),

     ),

   );

 }

}


2. login.dart 

 import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:login_register/ui_view/signup.dart';

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

class Login extends StatelessWidget {

 Widget build(BuildContext context) {

   return Scaffold(

     backgroundColor: Colors.lime,

     body: Center(

       child: Column(

         mainAxisAlignment: MainAxisAlignment.center,

         children: <Widget>[

           Container(

             padding: EdgeInsets.all(10),

             width: 250,

             color: Colors.white,

             child: TextFormField(

               decoration: InputDecoration(

                   hintText: "Email",

                   border: InputBorder.none

               ),

             ),

           ),

           SizedBox(height: 10,),

           Container(

             padding: EdgeInsets.all(10),

             width: 250,

             color: Colors.white,

             child: TextFormField(

               decoration: InputDecoration(

                   hintText: "Password",

                   border: InputBorder.none

               ),

             ),

           ),

           SizedBox(height: 20,),

           MaterialButton(

             padding: EdgeInsets.all(20),

             minWidth: 250,

             color: Colors.white,

             child: Text("Login", style: TextStyle(color: Colors.blue, fontSize: 15, fontWeight: FontWeight.bold),),

             onPressed: () {


             },

           ),

           TextButton(

             child: Text("Not a member? Signup now",

               style: TextStyle(color: Colors.white),),

             onPressed: () {

               Navigator.push(

                   context, MaterialPageRoute(builder: (context) => SignUp()));

             },

           )

         ],

       ),

     ),

   );

 }

}


3. signup.dart

import 'package:flutter/material.dart';

import 'package:login_register/ui_view/login.dart';

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

class SignUp extends StatelessWidget {

 // This widget is the root of your application.

 @override

 Widget build(BuildContext context) {

   return Scaffold(

     backgroundColor: Colors.yellow,


     body: Center(

       child: Column(

         mainAxisAlignment: MainAxisAlignment.center,

         children: <Widget>[

           Container(

             padding: EdgeInsets.all(10),

             width: 250,

             color: Colors.black87,

             child: TextFormField(

               decoration: InputDecoration(

                   hintText: "Fullname",

                   hintStyle: TextStyle(color: Colors.white),

                   border: InputBorder.none

               ),

             ),

           ),

           SizedBox(height: 10,),

           Container(

             padding: EdgeInsets.all(10),

             width: 250,

             color: Colors.black87,

             child: TextFormField(

               decoration: InputDecoration(

                   hintText: "Email",

                   hintStyle: TextStyle(color: Colors.white),

                   border: InputBorder.none

               ),

             ),

           ),

           SizedBox(height: 10,),

           Container(

             padding: EdgeInsets.all(10),

             width: 250,

             color: Colors.black87,

             child: TextFormField(

               decoration: InputDecoration(

                   hintText: "Password",

                   hintStyle: TextStyle(color: Colors.white),

                   border: InputBorder.none


               ),

             ),

           ),

           SizedBox(height: 20,),

           MaterialButton(

             padding: EdgeInsets.all(20),

             minWidth: 250,

             child: Text("REGISTER", style: TextStyle(color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),),

             color: Colors.black,

             onPressed: (){},

           ),

           TextButton(

             child: Text("Already registered? Login me", style: TextStyle(color: Colors.white)),

             onPressed: (){

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

             },

           )

         ],

       ),

     ),

   );

 }

}


Hasil :



Membuat Splash Screen Dengan Flutter

 

Berikut adalah cara membuat splash Screen :

1. Buat Project 

Buka VS Code, klik menu View => Command Pallete ( Ctrl+Shif+P ).

Klik “Flutter: new project” lalu isikan nama project misalnya “splashscreen“, kemudian enter. 

2. Membuat halaman Home

Buat folder “home” di dalam folder “lib“, kemudian buat file “home_view.dart” di dalam folder lib, ( /lib/home/home_view.dart )

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {

  const HomePage({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('App Fluterku'),

      ),

      body: Center(

        child: Text('Home Page'),

      ),

    );

  }

}


3. Membuat halaman splash screen

Buat file dengan nama “splashscreen_view.dart” di dalam folder lib, ( /lib/splashscreen_view.dart )

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:belajarflutter/home/home_view.dart';

class SplashScreenPage extends StatefulWidget {

  const SplashScreenPage({ Key? key }) : super(key: key);

  @override

  _SplashScreenPageState createState() => _SplashScreenPageState();

}

class _SplashScreenPageState extends State<SplashScreenPage> {

  @override

  void initState() {

    // TODO: implement initState

    super.initState();

    openSplashScreen();

  }

  openSplashScreen() async {

    //bisa diganti beberapa detik sesuai keinginan

    var durasiSplash = const Duration(seconds: 2);

    return Timer(durasiSplash, () {

      //pindah ke halaman home

      Navigator.of(context).pushReplacement(

        MaterialPageRoute(builder: (_) {

          return HomePage();

        })

      );

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: Colors.white,

      body: Center(

        child: Image.asset(

          "assets/images/splash.png",

          width: 200,

          height: 88,

        ),

      ),

    );

  }

}


Catatan : perhatikan kode di atas, ada assets gambar yang akan ditampilkan pada splash screen.

Di flutter, alamat gambar harus dimasukkan di dalam file pubspec.yaml, buka file tersebut lalu masukkan kode seperti di bawah ini:

flutter:

  assets:

    - assets/images/splash.png

Masuk file gambar splash.png pada folder “assets/images/“


4. Mengkonfigurasi halaman main.dart

Buka file “main.dart“, lalu isikan kode di bawah ini:

import 'package:flutter/material.dart';

import 'package:belajarflutter/splashscreen_view.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({ Key? key }) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      title: 'App Fluterku',

      home: SplashScreenPage(),

    );

  }

}


Setelah itu jalankan dengan perintah F5 atau klik menu Run => Start Debuging.


Menambahkan Icon Mata Pada Input Password

 


Untuk membuat input user lebih user friendly, beberapa developer menambahkan icon mata pada input form password. Hal ini berguna saat user tidak yakin dengan password yang diinput karena hanya berupa bintang-bintang atau titik-titik, setelah ada icon mata disamping kanan input password user akan dengan mudah melihat password apa yang diinputnya. Disini menggunakan jquery dan bootstrap yang sering digunakan developer

1. Buat File HTML :

<div class="row">

    <div class="col-md-6 col-lg-6 col-sm-12">

        <div class="form-group">

            <label>Password*</label>

            <fieldset>

                <div class="input-group ipt_pass">

                    <input type="password" class="form-control" placeholder="Masukkan Password" name="user_password" required>

                    <div class="input-group-append">

                        <span class="input-group-text"><a href="javascript:;"><i class="la la-eye-slash"></i></a></span>

                    </div>

                </div>

            </fieldset>

        </div>

    </div>

    <div class="col-md-6 col-lg-6 col-sm-12">

        <div class="form-group">

            <label>Re-Password*</label>

            <fieldset>

                <div class="input-group ipt_pass">

                    <input type="password" class="form-control" placeholder="Masukkan Re-Password" name="user_repassword" required>

                    <div class="input-group-append">

                        <span class="input-group-text"><a href="javascript:;"><i class="la la-eye-slash"></i></a></span>

                    </div>

                </div>

            </fieldset>

        </div>

    </div>

</div>


2. File Javascript

<script type="text/javascript">

$(document).ready(function() {

    $(".ipt_pass a").on("click", function(event) {

        event.preventDefault();

        var parent = $(this).parent().parent().parent();

        if(parent.find("input:eq(0)").attr("type") == "text"){

            parent.find("input:eq(0)").attr("type", "password");

            parent.find("i:eq(0)").addClass( "la-eye-slash" );

            parent.find("i:eq(0)").removeClass( "la-eye" );

        }else if(parent.find("input:eq(0)").attr("type") == "password"){

            parent.find("input:eq(0)").attr("type", "text");

            parent.find("i:eq(0)").removeClass( "la-eye-slash" );

            parent.find("i:eq(0)").addClass( "la-eye" );

        }

    });

});    

</script>


Hasil :


Mengubah Nama Package Pada Android Studio

 


Berikut adalah cara mengubah nama package :

1. Uncheck “Compact Middle Packages”

Klik icon gear di kotak kiri atas. Kemudian uncheck “Compact Middle Packages”



2. Rename package

Klik kanan pada folder di kotak kiri, yang ingin diubah namanya.

Pilih “Refactor” => “Rename”

Ada warning, pilih “Rename Package”




3. Do refactor

Akan muncul warning di bawah, beberapa file akan terpengaruh.

Kemudian pilih “Do refactor”


Monday, January 2, 2023

Menggunakan Query Like MongoDB Pada PHP

 


Berikut adalah query mysql untuk like:

select * from namatabel where namakolom LIKE '%katakunci%' order by kolomsort DESC LIMIT 0, 10;


Untuk digunakan di mongoDB php :

<?php

$dbName = 'namadb';

$tableName = 'namacollection';

$kolom = 'kolomygdicari';

$keyword = 'katakunci';

$sortby = 'kolomsort';

$limit = 10;

$skip = 0;

$returns = array();

$manager = new MongoDB\Driver\Manager();

$filter = array($kolom=> new MongoDB\BSON\Regex($keyword, 'i'));

$options = array('limit'=>$limit,'skip'=>$skip,'sort'=>array($sortby=>-1));

$query = new MongoDB\Driver\Query($filter, $options);

$cursor = $manager->executeQuery($dbName.'.'.$tableName, $query);

$cursor->setTypeMap(['root' => 'array', 'document' => 'array', 'array' => 'array']);

$cursor = $cursor->toArray();

foreach ($cursor as $document) {

    $document['_id'] = (array) $document['_id'];

    $returns[] = $document;

}

echo '<pre>';

print_r($returns);

echo '</pre>';

echo '<hr />';


Penggunaan MongoDB group by & count ( MySQL dan PHP )

 


Pada MySQL menjalankan query group by dan count atau sum 

select kolomA, count(kode) as jumkode from tabel where status='oke' group by kolomA order by jumkode DESC 

Pada mongoDB, menggunakan fungsi aggregate

 db.namacollection.aggregate([{ $match: { status: "oke" } },{"$group": {_id: "$kolomA",count: {$sum: 1}}},{$sort: {count: -1}}])

Menggunakan php driver mongoDB :

$manager = new MongoDB\Driver\Manager();
$command = new MongoDB\Driver\Command([
  'aggregate' => 'namacollection',
  'pipeline' => [
      ['$match'=>['status'=>'oke']],
      ['$group' => ['_id' => '$kolomA', 'count' => ['$sum' => 1]]],
      ['$sort'=>['count'=>-1]],
  ],
  'cursor' => new stdClass,
]);
$cursor = $manager->executeCommand('namadatabase', $command);


Memberi filter range tanggal dari tanggal sekian sampai tanggal sekian :

db.namacollection.aggregate([{ $match: { tanggal: {$gte:ISODate("2021-05-01"),$lt:ISODate("2020-05-30"}} } },{"$group": {_id: "$kolomA",count: {$sum: 1}}},{$sort: {count: -1}}])
//$gte bisa diganti $gt kalau error


Versi php adalah :

$manager = new MongoDB\Driver\Manager();
$command = new MongoDB\Driver\Command([
  'aggregate' => 'namacollection',
  'pipeline' => [
    ['$match'=>['tanggal'=>
                    [
                        '$gt'=>new MongoDB\BSON\UTCDatetime(strtotime('2021-05-01 00:00:00') * 1000),
                        '$lt'=>new MongoDB\BSON\UTCDatetime(strtotime('2020-05-30 23:59:59') * 1000),
                    ] 
                   ]
        ],
      ['$group' => ['_id' => '$kolomA', 'count' => ['$sum' => 1]]],
      ['$sort'=>['count'=>-1]],
  ],
  'cursor' => new stdClass,
]);
$cursor = $manager->executeCommand('namadatabase', $command);
//format kolom tanggal haruslah berupa datetime


Menggunakan CRUD MongoDB Pada PHP

 


Berikut adalah cara menggunakan CRUD mongoDB pada PHP :

1. Buat file insert-mongo.php

<?php

//$manager = new MongoDB\Driver\Manager("mongodb://user:password@localhost:27017");

//$manager = new MongoDB\Driver\Manager("mongodb://localhost:27017");

//$manager = new MongoDB\Driver\Manager("mongodb://127.0.0.1:27017");

$manager = new MongoDB\Driver\Manager();

$bulkWrite = new MongoDB\Driver\BulkWrite;

$bulkWrite->insert(['nama' => 'Erlangga', 'umur' => 26, 'status' => 'pria']);

$bulkWrite->insert(['nama' => 'Arbi', 'umur' => 31, 'status' => 'pria', 'lahir' => new MongoDB\BSON\UTCDatetime(strtotime('1987-04-02') * 1000)]);

$bulkWrite->insert(['nama' => 'Deswita', 'umur' => 25, 'status' => 'wanita']);

$manager->executeBulkWrite("databaseAnda.collectionUser", $bulkWrite);


2. Buat File select-mongo.php

<?php

$manager = new MongoDB\Driver\Manager();

$query = new MongoDB\Driver\Query( [] );

$cursor = $manager->executeQuery("databaseAnda.collectionUser", $query);

foreach ($cursor as $document) {

    echo '<pre>';

    print_r($document);

    echo '</pre>';

}


3. Buat File select-filter-mongo.php

<?php

$manager = new MongoDB\Driver\Manager();

$filter = ['umur' => ['$lt' => 26]];

$options = [];

$query = new MongoDB\Driver\Query($filter, $options);

$cursor = $manager->executeQuery("databaseAnda.collectionUser", $query);

//convert cursor menjadi array

    $cursor->setTypeMap(['root' => 'array', 'document' => 'array', 'array' => 'array']);

    $cursor = $cursor->toArray();

foreach ($cursor as $document) {

        //convert id menjadi array

        $document['_id'] = (array) $document['_id'];

    echo '<pre>';

    print_r($document);

    echo '</pre>';

}


4. Menambah limit, offset, dan juga sort pada mongo DB:

$limit = 10;

$skip = 5;

$options = array('limit'=>$limit,'skip'=>$skip,'sort'=>array('kolomA'=>1, 'kolomB'=>-1));

//limit adalah jumlah data yang ingin ditampilkan.

//skip adalah offset, mulai dari index keberapa data ditampilkan.

//sort by kolom, nilai 1 = ascending, nilai -1 = descending.


5. Filter query not equal atau != dalam SQL

$query = array('namakolom'=>array('$ne'=>null));//namakolom tidak sama dengan null


6. Menghitung jumlah kolom atau perintah count di SQL

$manager = new MongoDB\Driver\Manager();

//query not equal null

$query = array('namakolom'=>array('$ne'=>null));//array('namakolom'=>'2020')

$command = new MongoDB\Driver\Command(array('count'=>'namatabelorcollection','query'=>$query));

$result = $manager->executeCommand('namadatabase', $command);

$count = $result->toArray()[0]->n;

 

7. Buat File update-mongo.php

<?php

$manager = new MongoDB\Driver\Manager();

//start update

$bulkWrite = new MongoDB\Driver\BulkWrite;

$bulkWrite->update(

    ['nama' => 'Deswita'],

    ['$set' => ['umur' => 30]],

    ['multi' => true, 'upsert' => false]

);

$manager->executeBulkWrite("databaseAnda.collectionUser", $bulkWrite);

//update selesai

//query utk menampilkan hasilnya

$query = new MongoDB\Driver\Query([]);

$cursor = $manager->executeQuery("databaseAnda.collectionUser", $query);

foreach ($cursor as $document) {

    echo '<pre>';

    print_r($document);

    echo '</pre>';

}


Keterangan :

multi = true, artinya semua nama “deswita” akan di update. Kalau muti = false, hanya 1 baris dokumen pertama yang diupdate.

upsert = false, artinya jika tidak ada data yang diupdate maka tidak melakukan update apa-apa. Jika upsert = true, maka akan menginsert data baru sesuai filter ada.


8. Buat File delete-mongo.php

<?php

$manager = new MongoDB\Driver\Manager();

$bulkWrite = new MongoDB\Driver\BulkWrite;

$bulkWrite->delete(['nama' => 'Deswita'], ['limit' => true]);

$manager->executeBulkWrite("databaseAnda.collectionUser", $bulkWrite);

$query = new MongoDB\Driver\Query([]);

$cursor = $manager->executeQuery("databaseAnda.collectionUser", $query);

foreach ($cursor as $document) {

    echo '<pre>';

    print_r($document);

    echo '</pre>';

}


Keterangan :

limit = true, artinya hanya menghapus 1 data. jika limit = false atau 0, maka semua nama “deswita” akan dihapus di collectionUser.


Memunculkan Simbol & Emoji Pada OS Mac

  Memunculkan Simbol & Emoji  1. Buka aplikasi Pages / Notes pada Macbook. 2. Klik pada Menubar Edit --> Pilih Emoji and Symbols a...