Sunday 13 November 2022

Flutter Session Installation | Pros | Set & Get Functions | Remove Session Variable

 



========================
Note : newPage.dart file code is given below.
========================
1. In main.dart file, After int _counter = 0;
Add code given below
var sessionManager = SessionManager();
@override
void initState() {
super.initState();
setSessionValue();
}
setSessionValue()
async {
dynamic count = await SessionManager().get("count");
if(count!=null)
{
_counter=int.parse('$count');
_counter=_counter-1;
_incrementCounter();
}
}
----------------------------------
2.In main.dart file, at the end of _incrementCounter function
Add below line.
await sessionManager.set("count", _counter);
========================
newPage.dart File Code :
import 'package:flutter/material.dart';
import 'main.dart';
import 'package:flutter_session_manager/flutter_session_manager.dart';
class newPage extends StatelessWidget {
const newPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MyHomePage(title: 'Flutter Demo Page 2'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
var sessionManager = SessionManager();
@override
void initState() {
super.initState();
setSessionValue();
}
setSessionValue()
async {
dynamic count = await SessionManager().get("count");
if(count!=null)
{
_counter=int.parse('$count');
_counter=_counter-1;
_incrementCounter();
}
}
Future<void> _incrementCounter() async {
setState(() {
_counter++;
});
await sessionManager.set("count", _counter);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
children: <Widget>[
const Text(
'Second Page Count :',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
RaisedButton(
child: new Text('Jump To Previous Page'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyApp()),
);
},
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), 
);
}
}
-------------------------------
The biggest pros of using session in flutter or any other language is that you can pass values between 2 or multiple pages without form submission or setting it hidden field.
For example, there are 2 pages in flutter application, the PLUS button below increases the count on that page, I can set that value in session and pass it down in 2nd page and vice versa.
I shall show how to do the setup and how to implement session in flutter.
Let’s get started.
In basic project of flutter application, there is always a main.dart. file with a button which will increase the count. And I also added 2 raised-buttons manually in design to redirect to second page and to destroy session.
I also created another page called newPage.dart with some session code pre-applied, but it shows error because I haven’t added session library yet.
To add libraries or dependencies, pubspec.yaml file is used.
However, we are going add session library using commands.
So, let’s go to browser and search “flutter session”.
Click on installing tab.
There you will find command to install it in dependencies.
Run that command.
Reopen pubspec file, you will find flutter_session_manager line, which means the library is installed.
And there is no error in newPage.dart file.
Let’s go to main.dart file.
I shall enable code to redirect to second page.
To make session library actually work in dart file, we have to import it.
If we go to Readme tab, you will find session code, like how to create session variable.
I shall use 1st and 3rd line.
Actually I created some code. So just copy-paste it. Code link is given in the description.
From 1st point, copy the code and paste it below _counter variable.
This code is used for fetching session variable at the page-start.
SessionManager.get function is used for it.
To set the session variable “count”, sessionManager.set function is used.
Use it after the setState function.
Let’s run the project.
Let’s test the code.
From first page, I shall set counter value to 4.
And that value is successfully called in 2nd page.
From this page, if I change it, it will be reflected in 1st page.
We can also destroy session by using destroy function.
Or we can unset it.
So, in second raised-button, I shall call remove function.
That’s it.
Thanks for watching. Like, Share and Subscribe.

Tuesday 30 August 2022

Data Table & Jquery | Overwrite The Count Of Result

 


Data Table & Jquery | Overwrite The Count Of Result

-------------------------------

Subscribe my Channel:-

http://www.youtube.com/user/SanketRooney?sub_confirmation=1

Facebook Page:-

https://www.facebook.com/UnpossibleNS

Twitter Account:-

https://twitter.com/UnpossiblePOG

Blog:-

https://unpossiblepog.blogspot.com/

Website:-

https://unpossiblepog.com/

Gaming Instagram:- (@unpog.gaming)

https://www.instagram.com/unpog.gaming/

-------------------------------

Code :-

<table id="userTable">

<thead>

<th>First Name</th>

<th>Last Name</th>

<th>Age</th>

</thead>

<tbody>

<tr>

<td>Extra Column 1</td>

<td>Extra Column 2</td>

<td>Extra Column 3</td>

</tr>

<tr>

<td>100</td>

<td>Steven</td>

<td>King</td>

</tr>

<tr>

<td>101</td>

<td>Neena</td>

<td>Kochhar</td>

</tr>

<tr>

<td>102</td>

<td>Lex</td>

<td>De Haan</td>

</tr>

<tr>

<td>103</td>

<td>Alexander</td>

<td>Hunold</td>

</tr>

<tr>

<td>104</td>

<td>Bruce</td>

<td>Ernst</td>

</tr>

<tr>

<td>105</td>

<td>David</td>

<td>Austin</td>

</tr>

<tr>

<td>106</td>

<td>Valli</td>

<td>Pataballa</td>

</tr>

<tr>

<td>107</td>

<td>Diana</td>

<td>Lorentz</td>

</tr>

<tr>

<td>108</td>

<td>Nancy</td>

<td>Greenberg</td>

</tr>

<tr>

<td>109</td>

<td>Daniel</td>

<td>Faviet</td>

</tr>

<tr>

<td>110</td>

<td>John</td>

<td>Chen</td>

</tr>

<tr>

<td>111</td>

<td>Ismael</td>

<td>Sciarra</td>

</tr>

<tr>

<td>112</td>

<td>Jose Manuel</td>

<td>Urman</td>

</tr>

<tr>

<td>113</td>

<td>Luis</td>

<td>Popp</td>

</tr>

<tr>

<td>114</td>

<td>Den</td>

<td>Raphaely</td>

</tr>

<tr>

<td>115</td>

<td>Alexander</td>

<td>Khoo</td>

</tr>

<tr>

<td>116</td>

<td>Shelli</td>

<td>Baida</td>

</tr>

<tr>

<td>117</td>

<td>Sigal</td>

<td>Tobias</td>

</tr>

<tr>

<td>118</td>

<td>Guy</td>

<td>Himuro</td>

</tr>

<tr>

<td>119</td>

<td>Karen</td>

<td>Colmenares</td>

</tr>

</tbody>

</table>

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<script>

$(document).ready(function() {

$('#userTable').DataTable({

"ordering": false,

"searching":false,

initComplete: function() {

pageCountDatatable();

}

});

});

function pageCountDatatable()

{

var actual_cnt=20;

var str_array = $("#userTable_info").html().split(" ");

for(var i=0;i<str_array.length;i++)

{

if(!isNaN(str_array[i]))

{

if(parseInt(str_array[i])>actual_cnt)

{

str_array[i] = actual_cnt;

}

}

}

$("#userTable_info").html(str_array.join(" "));

$("#userTable_info").show();

}

$("#userTable").on('page.dt',function(){

$("#userTable_info").hide();

setTimeout(function(){

pageCountDatatable();

},1000);

});

$("#userTable").on('length.dt',function(){

$("#userTable_info").hide();

setTimeout(function(){

pageCountDatatable();

},1000);

});

</script>

-------------------------------

In this tutorial, I shall show how we can overwrite the count of result in data table.

Here, we have one data table with 20 rows of actual data.

In this data table, I just wanted to add extra row which will represent additional column and will not be the part of the actual data.

So, actually I wanted to display 20 entries as a text instead of 21 entries.

So for that, I shall create a javascript function.

I am going to call it inside initComplete function.

For now, we add static value of actual row count as 20 rows.

Of course you can get that count dynamically.

Just inspect element, and find out the ID for that div.

Copy it.

We shall use it’s ID to get text inside it.

We shall split it by space. And convert it into an array.

In for loop, first we shall find out whether the specific array position has numeric value to it or not because we don’t want to replace texts. Then, we shall only replace numbers and those numbers which are greater than 20.

After the end of the loop, we shall overwrite the text in same ID.

So, if we refresh, we shall see that it is showing “20 entries” text.

However if we change the length per page, or change pages, it will again go back to “21 entries” text.

So for that, first copy the table ID, on its page change event, we shall write some jquery.

If we change page number, it shows an alert box, but it won’t change the text even if we call function.

So to fix that, we have to delay it’s execution by using the setTimeout function.

The time delay will be 1 second.

Call our function inside it.

However the output behaves weirdly so we shall hide it the page changes.

And we shall show it when the output becomes ready.

To display same output when page length is changed, copy-paste the whole code.

And replace “page” with “length”.

And now, your output will display no more than 20 entries text.

You can copy-paste the code from the link given in the description.

Thanks for watching. Like, Share and Subscribe.

Monday 8 August 2022

Flutter File Picker | Post File Through API Using DIO | XAMPP As An API Server

   




Flutter File Picker | Post File Through API Using DIO | XAMPP As An API Server

-------------------------------

Download Project:-

https://unpossiblepog.com/projects/FLUTTER+PHP/Add-File-Picker-And-Send-File-To-API

Subscribe my Channel:- 

http://www.youtube.com/user/SanketRooney?sub_confirmation=1 

Facebook Page:- 

https://www.facebook.com/UnpossibleNS 

Twitter Account:- 

https://twitter.com/UnpossiblePOG 

Blog:- 

https://unpossiblepog.blogspot.com/ 

Website:- 

https://unpossiblepog.com/ 

Gaming Instagram:- (@unpog.gaming)

https://www.instagram.com/unpog.gaming/

-------------------------------

Step 1 : Import Dependencies in pubspec.yaml file. And in terminal run the command “flutter pub get”.

file_picker: any

http: any

dio: any

http_parser: ^4.0.1

-------------------------------

Step 2 : Add imports in main dart file.

import 'package:file_picker/file_picker.dart';

import 'package:dio/dio.dart';

import 'package:http_parser/http_parser.dart';

-------------------------------

Step 3 : On button pressed, replace the code with following. It may ask to create a function. Click it or you can manually add the following code in same class.

(){getHttp();}

-------------------------------

Step 4 : for getHttp function, add following code.

Note : Your apache’s ip-address may differ.

void getHttp() async {

FilePickerResult? result = await FilePicker.platform.pickFiles();

var path='';

var filename='';

if (result != null) {

PlatformFile file = result.files.first;

var path=file.path.toString();

var filename=file.name;

print(file.name);

print(file.bytes);

print(file.size);

print(file.extension);

print(file.path);

var formData = FormData.fromMap({

'name': '1',

'age': '2',

'fileToUpload' : await MultipartFile.fromFile(

path,

filename:filename,

contentType: new MediaType("image", "jpeg")

),

});

Response response = await Dio().post('http://<your-ipv4-address>/flutter_test/store_data_flutter.php', data: formData);

print(response.data.toString());

} else {

}

}

-------------------------------

Step 5 : Make sure to re-run the project. Otherwise the file-picker may not work.

Add the IPv4 address in DIO's post's path (<your-ipv4-address>).

-------------------------------

Step 6 : Enable XAMPP, start APACHE server. Create a folder "flutter_test" in HTDOCS folder. Create a php file there and paste the following code.

<?php

$request_body = $_POST;

if(isset($_FILES["fileToUpload"]))

{

$target_dir = "";//"uploads/";

$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);

}

exit;

?>

-------------------------------

In previous tutorial, I made a video on how to post data to API where the API server is a local XAMPP server.

In this part, I shall show how to implement FILE-PICKER in flutter app and how we can send files to API in flutter application.

I shall make this video as simple and easy as possible.

I am referring points from blog which was made by me. So let’s get started.

I shall build the application from scratch.

From step 1, copy-paste the dependencies in pubspec.yaml file.

Paste it at the same level as flutter which is inside dependencies.

You can click on “pub get” link or simply type the command in terminal “flutter pub get”.

It will download dependencies into the project.

From step 2, copy-paste the import lines and paste it in main.dart file.

Let’s run the app. Wait for it to be displayed on mobile screen.

There will be a floating button, on it’s pressed event, paste the following code from step 3.

After saving, there will be an error, ignore that because we haven’t added any function yet.

The outermost curly bracket is the end bracket of class.

From step 4, copy the function code, and paste it just above the class’s end bracket.

From step 5, make sure that you rerun the application to make sure that FILE PICKER is properly implemented.

From step 6, create a folder called “flutter_test” in HTDOCS folder of xampp. Create a PHP file inside it. Give it a name as “store_data_flutter.php”.

For the IP address, open the command prompt, type “ipconfig” command. Use the IPv4 which is in my case is 192.168.56.1.

Copy-paste the code inside that PHP file. That code will help to store image in server.

Let’s test it.

There is a log info, and if you look inside the folder, the PDF file is stored.

Let’s try it again.

You will see the file appear.

So that is it.

You can download the whole project from the link given in the description.

Thanks for watching. Like, Share and Subscribe.

Sunday 29 May 2022

Upload Files On Google Drive Using PHP API

 


Upload Files On Google Drive Using PHP API

-------------------------------

Google Drive API Part 1:-
https://youtu.be/etZFZPKJc_I

Stack Overflow Link :-

https://stackoverflow.com/questions/25707891/google-drive-php-api-simple-file-upload


Subscribe my Channel:- 

http://www.youtube.com/user/SanketRooney?sub_confirmation=1 


Facebook Page:- 

https://www.facebook.com/UnpossibleNS 


Twitter Account:- 

https://twitter.com/UnpossiblePOG 


Blog:- 

https://unpossiblepog.blogspot.com/ 


Website:- 

https://unpossiblepog.com/ 

Gaming Instagram:- (@unpog.gaming)

https://www.instagram.com/unpog.gaming/


-------------------------------

upload-file.php

-------------------------------


<?php

require __DIR__ . '/vendor/autoload.php';


$client = new Google_Client();


// Get your credentials from the console


$client->setClientId('<YOUR_CLIENT_ID>');


$client->setClientSecret('<YOUR_CLIENT_SECRET>');


$client->setRedirectUri('<YOUR_REGISTERED_REDIRECT_URI>');


$client->setScopes(array('https://www.googleapis.com/auth/drive.file'));





session_start();





if (isset($_GET['code']) || (isset($_SESSION['access_token']) && $_SESSION['access_token'])) {


if (isset($_GET['code'])) {


$client->authenticate($_GET['code']);


$_SESSION['access_token'] = $client->getAccessToken();


} else


$client->setAccessToken($_SESSION['access_token']);





$service = new Google_Service_Drive($client);





//Insert a file


$file = new Google_Service_Drive_DriveFile();


$file->setName(uniqid().'.jpg');


$file->setDescription('A test document');


$file->setMimeType('image/jpeg');





$data = file_get_contents('a.jpg');





$createdFile = $service->files->create($file, array(


'data' => $data,


'mimeType' => 'image/jpeg',


'uploadType' => 'multipart'


));





print_r($createdFile);





} else {


$authUrl = $client->createAuthUrl();


header('Location: ' . $authUrl);


exit();


}


?>


-------------------------------




In last part, we were able to list files from google drive.


In this part, we shall upload files from our server to google drive.


Let’s jump right into it.


I got a code from stack-overflow, you can copy-paste the code from their link or from my blog. Both links are given in the description.


Create a php file inside a google drive folder which we created last time.


Paste the code inside it within php tags.


We have a vendor folder ready, so remove first 2 lines & import the library.


For client id and client secret. We have to look into credentials.json file.


Also make sure that we first ran quickstart file, the scope was DRIVE.


If not, delete credentials.json file and redo steps again.


Inside json file, we shall find client-id and client-secret.


Copy-paste them inside our code.


In console cloud google site, first select the project.


Then go inside credentials inside APIS & SERVICES.


Select the authentication ID, inside it, add extra URL.


Use the name of newly created php file and save it.


As per code, we shall upload a.png file so change the code accordingly.


Now hit our file in URL.


There is an error.


Change the file path to absolute. Save it.


Add the file path.


After refresh, it will print some array.


And if you go inside your google drive, you will find that image.

Thanks for watching.


Sunday 24 April 2022

Google Drive API PHP | Display List Of Files From Google Drive On Browser



JQUERY Validator | Move Error Messages Anywhere On Web Page

-------------------------------

http://www.youtube.com/user/SanketRooney?sub_confirmation=1 


Facebook Page:- 
https://www.facebook.com/UnpossibleNS 

Twitter Account:- 
https://twitter.com/UnpossiblePOG 

Blog:- 
https://unpossiblepog.blogspot.com/ 

Website:- 
https://unpossiblepog.com/ 

Gaming Instagram:- (@unpog.gaming)
https://www.instagram.com/unpog.gaming/

-------------------------------

By the end of this video you will be able to get list of files from your google drive using PHP.

Let’s not waste the time, shall we?

Open the google and search “Google Drive API PHP”.

Open the developer.google.com site.

You have to have PHP version greater than 5.4.

Also, if you are using Windows OS, you can download the composer from this link.

For linux user, you have to enter the command “sudo apt install composer”.

You can find how to enable API, however sometimes google update this page, so this link won’t always be here.

So to enable the API, follow my steps.

On google, search “console cloud google”.

Go inside the link called “console.cloud.google.com”

From side menu, click on dashboard inside home.

Here, next to Google Cloud Platform, you will see one dropdown, click on it, create a new project.

Give it any random name.

Wait for project to be created.

After that, again click on dropdown and select the project that you recently created.

After that, open the side menu, and in APIs & Services, click on Credentials.

Click on CREATE CREDENTIALS, and OAUTH Client ID.

Initially you will have to configure the project.

Only the EXTERNAL USER TYPE is available, so click on it and click on CREATE.

Give any random APP NAME.

Select your email ID.

Scroll down.

Add any random domain.

You can even add google.com for now.

I have my own website so I am going to add it.

In Developer contact information, add your own email address.

Click on SAVE AND CONTINUE.

Add all the scopes available.

In test users, add your own email address for now.

Click on SAVE AND CONTINUE.

Now, we are ready to create credentials.

Again go to side menu, APIS and SERVICES, Credentials.

Click on CREATE CREDENTIALS, OAUTH CLIENT ID.

Select Web Application.

Give any name.

In Authorized JS Origins, you can add localhost’s IP address.

In, Authorized redirect URIs, you have to add the path which will display list of files in google drive.

I am using XAMPP, so in HTDOCS, I am going to create a folder.

Use the folder name next to ip address and then “quickstart.php”.

We shall later going to create a quickstart PHP file.

Once done, you will see CLIENT ID, click on it’s download icon.

Download the JSON.

Copy-paste that file inside google-drive folder which is inside HTDOCS folder of xampp.

Rename it to credentials.json file as given in code.

Open the command prompt, and reach to the google-drive folder by using CD commands.

Once reached, type the command as shown in document.

Wait for vendor file to download.

After that, create a quickstart.php file in that google-drive folder.

Paste the given code inside that file.

We shall change scope to DRIVE because in next video, we shall upload files from localhost to google drive.

Change the number of files that you want to list.

Go to google cloud platform, click on Library, search GOOGLE DRIVE API.

Enable the API.

Now run the command they provided in same command prompt.

It shall ask for verification code.

Mark the link and right click at the top of CMD, and copy it.

Paste it in browser’s URL.

Login with your email.

Actually I forgot to start XAMPP.

But it doesn’t matter.

Copy the value of CODE in URL up to the “&” before the SCOPE variable.
Paste it and you will see the list of files from google drive.

There is an error of count function which is caused because of the different version of PHP.

I shall fix that later.

First, I shall make it run on browser by starting Apache server from XAMPP.

Hit the URL which ends with quickstart.php

It is not allowing to run it on browser so the comment those lines from file.

You will be able to see files list.

Go to the file where COUNT function is created.

Wrap it’s argument inside an array and now the error is gone.
Like if that works for you, any doubts, comment them down below.
In next video, I am going to upload files from local server to google drive, so make sure to subscribe if you want to.
Thanks for watching.