What's new

HELP FLUTTER SHAREDPREFERENCES HTTP

xDejavu412

Addict
Established
Joined
Jul 18, 2015
Posts
58
Reaction
6
Points
77
Patulong po sana sa pagkuha ng data sa ibang table galing mysql di ko po kase alam kung paano makuha yung data na galing sa ibang table na lumalabas lang ay yung data ng kung sino ang naka logged in. Katipunero-
menu.png
login.png
 

Attachments

Napi-print mo ba yung response galing sa server?
Para ma-check mo, palitan mo muna yung login() method mo nito.

Code:
Future<void> login() async {
  if (username.text.isEmpty || password.text.isEmpty) {
    Fluttertoast.showToast();
    return;
  }

  final uri = Uri.parse('https://10.0.17.126/conn/login.php');
  final body = <String, dynamic>{
    'username': username.text,
    'password': password.text,
  };
 
  final response = await http.post(uri, body: body);
  if (response.statusCode == 200) {

    final data = json.decode(response.body);
    print(data); // Dapat lumabas yung kailangan mong data.
    // TODO: Navigate to Menu page.
    return;
  } else {
    Fluttertoast.showToast();
    return;
  }
}

May ibang mga bagay akong ipo-point out na need mo pag-aralan kapag gagamit ka ng Flutter.
1. Pagaralan mo yung mga basics ng State Management. I suggest cubit .
2. Wag ka gagamit ng late variable hanggat maaari. Hindi ka nya matutulungan kasi dinadaya mo lang yung compile time pero sa runtime may chance na mag-error yang program mo. Pwera na lang sa mga certain scenarios talaga.

Well pwede mo naman sya mapagana, temporarily, pero dapat malaman mo din kung paano yung tamang ways or good practice kung pano sumulat ng codes para mas solid yung mga program na gagawin mo.
 
Last edited:
Napi-print mo ba yung response galing sa server?
Para ma-check mo, palitan mo muna yung login() method mo nito.

Code:
Future<void> login() async {
  if (username.text.isEmpty || password.text.isEmpty) {
    Fluttertoast.showToast();
    return;
  }

  final uri = Uri.parse('https://10.0.17.126/conn/login.php');
  final body = <String, dynamic>{
    'username': username.text,
    'password': password.text,
  };
 
  final response = await http.post(uri, body: body);
  if (response.statusCode == 200) {

    final data = json.decode(response.body);
    print(data); // Dapat lumabas yung kailangan mong data.
    // TODO: Navigate to Menu page.
    return;
  } else {
    Fluttertoast.showToast();
    return;
  }
}

May ibang mga bagay akong ipo-point out na need mo pag-aralan kapag gagamit ka ng Flutter.
1. Pagaralan mo yung mga basics ng State Management. I suggest cubit .
2. Wag ka gagamit ng late variable hanggat maaari. Hindi ka nya matutulungan kasi dinadaya mo lang yung compile time pero sa runtime may chance na mag-error yang program mo. Pwera na lang sa mga certain scenarios talaga.

Well pwede mo naman sya mapagana, temporarily, pero dapat malaman mo din kung paano yung tamang ways or good practice kung pano sumulat ng codes para mas solid yung mga program na gagawin mo.
Lumalabas naman po yung data papunta sa menu page. Yung problema ko po is paano makuha yung data ng naka logged in na user. Bali po nakukuha ko lahat ng data ng naka register sa menu page ko gusto ko lang po is makuha lang sana yung data ng naka logged in.
 
Lumalabas naman po yung data papunta sa menu page. Yung problema ko po is paano makuha yung data ng naka logged in na user. Bali po nakukuha ko lahat ng data ng naka register sa menu page ko gusto ko lang po is makuha lang sana yung data ng naka logged in.
Ok. Then filter mo dun sa list yung value na gusto mong kuhain gamit yung username and password ng naka-logged in na user.

Code:
final index = employees.indexWhere((e) => e.username == username.text && e.password == password.text);
if (index == -1 ) return Fluttertoast(); // employee not found.
final employee = employees[index];
print('Current employee: $employee');
 
pa singit. Boss Katipunero- totoo po bang pwde makagawa ng both web app and android application ang flutter?
 
pa singit. Boss Katipunero- totoo po bang pwde makagawa ng both web app and android application ang flutter?
Yeah.
Currently supported nya in stable:
Android, iOS, at Web.

Supported nya na din this year, pero hopefully maging stable next year:
Windows, Linux, Mac

Meron pang other specific devices na supported nya like:
Apple Watch, Foldaphones, Embedded (getting ready for Fuchsia)

20221101_225001.jpg
 

Attachments

Yeah.
Currently supported nya in stable:
Android, iOS, at Web.

Supported nya na din this year, pero hopefully maging stable next year:
Windows, Linux, Mac

Meron pang other specific devices na supported nya like:
Apple Watch, You do not have permission to view the full content of this post. Log in or register now., Embedded (getting ready for Fuchsia)

View attachment 2316668
wow, thanks po sa info. Abang din po ako sa tutorial niyo soon
 
Ok. Then filter mo dun sa list yung value na gusto mong kuhain gamit yung username and password ng naka-logged in na user.

Code:
final index = employees.indexWhere((e) => e.username == username.text && e.password == password.text);
if (index == -1 ) return Fluttertoast(); // employee not found.
final employee = employees[index];
print('Current employee: $employee');
Ok na po nakukuha ko na po yung current employee. Gumamit po ako ng sharedpreferences. Paano po yung code na kukuhanin yung data ng employee galing sa ibang table? Nakukuha ko naman yung data ng kung sino yung naka logged in pero sa sa employee table lang. Gusto ko po yung kukuhanin rin yung data ng nasa ibang table. Alam ko naman po yung sql query di ko lang po alam kung paano ma implement yun sa flutter.

Bali ito po yung screenshot ng app ko.
Nakukuha ko po yung data kaso lang yung Name tsaka employeeID is sa isang table lang yan.
Yung Status at logdate sa ibang table naman po yan pero hindi po data ni "naruto uzumaki yung nasa DataTable po. Tanong ko po is paano po makuha yung table ni "naruto uzumaki"? Di ko po kase alam kung paano po makuha lang yung data ni "naruto uzumaki" ng hindi lumalabas yung data ng ibang user.
Screenshot 2022-11-14 080948.png
 

Attachments

Last edited:
Yung backend mo ay dapat connected sa flow na gusto mong gawin sa frontend.
So base sa feature mo, gusto mo kuhain yung Log Info ni current employee.

1. Sa Database mo, ganto dapat yung query mo.
SQL:
SELECT * FROM employee_logs WHERE employee_id = ?;

2. Sa server mo, may endpoint ka dapat na ganto. Not sure kung paano gawin sa php pero ganto yung wireframe.
Code:
GET /employees/:id/logs
Tas may handler tong endpoint na mag-access kay database gamit yung query sa #1.

3. Then pagdating sa frontend mo, tatawagin mo yung endpoint na ginawa mo sa #2.
Code:
Future<void> fetchEmployeeLogs(int employeeId) async {
  final uri = Uri.parse('https://10.0.17.126/employees/$employeeId/logs);
 
  try {
  final response = await http.get(uri);

    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      print(data); // TODO: Deserialize response.
    } else {
      Fluttertoast.showToast();
    }

  } catch (e) {
     // TODO: Handle error.
      Fluttertoast.showToast();
  }
}

4. Create ka ng model para mas organize yung logs ni user at mas madali i-deserialize. Something like:
Code:
class EmployeeLogs {
  final date;
  final status;
  factory EmployeeLogs.fromJson(){
  // TODO.
  };
}
 
Nag eerror pa rin po base sa console mali daw yung query.
SQL:
<?php
    session_start();
  
    $servername = "localhost";
    // Give your username and password
    $username = "root";
    $password = "";
   // Give your Database name
    $dbname = "employeedb";
  // Give your table name
    $attendance = "attendance1"; // table for Attendance.
    $employee = "employee1"; //table for Employeee

    // Create Connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check Connection
    if($conn->connect_error){
        die("Connection Failed: " . $conn->connect_error);
        return;
    }
   
  //Get records from the database
   $sql = "SELECT * FROM $attendance WHERE rfid = ?";
    $db_data = array();
    $result = $conn->query($sql);
     if($result->num_rows > 0){
        while($row = $result->fetch_assoc()){
             $db_data[] = $row;
        }
     // Send back the complete records as a json
     echo json_encode($db_data);
    }else{
         echo "error";
     }
    $conn->close();
 
 return;
?>

3. Ito naman po yung tinatawag ko yung endpoint. Pero parang may mali po ako dito. Dito kase nag eerror parang may kulang po.
Code:
  Future<List<Employee>> getAttendance() async {
    var uri = 'http://10.0.17.126/conn/view_data.php/$rfid';
    final response = await http.get(Uri.parse(uri), headers: {
      "Content-type": "applcation/json",
    });
    var list = json.decode(response.body);
    List<Employee> employees =
        await list.map<Employee>((json) => Employee.fromJson(json)).toList();
    employeeDataSource = EmployeeDataSource(employees);
    return employees;
  }
}

4. Ito naman yung model class ko
Code:
class Employee {
  final String status;
  var logdate;
  Employee({
    required this.status,
    required this.logdate,
  });
  factory Employee.fromJson(Map<String, dynamic> json) {
    return Employee(
        status: json['status'],
        //DateTime.fromMicrosecondsSinceEpoch(logdate * 1000),
        logdate: json['logdate']);
  }
}
}
 
Last edited:
Anong data type ng logdate mo sa Employee?
Anong structure ng employee log data from Database? from Server?
Try mo nga i-log yung nakukuha ni Flutter para makita natin kung tama yung deserialization mo.
 
employee.png

ito po yung user info

attendance.png

ito naman po yung attendance info na gusto kung kunin. yung logdate po niya is naka unixtime na format.

Try mo nga i-log yung nakukuha ni Flutter para makita natin kung tama yung deserialization mo.
di ko po alam kung paano gawin ito.

Sa tingin ko po dito ako may mali.

Code:
  Future<List<Employee>> getAttendance() async {
    var uri = 'http://10.0.17.126/conn/view_data.php/$rfid/$employeeID';
    final response = await http.get(Uri.parse(uri), headers: {
      "Content-type": "applcation/json",
    });
    var list = json.decode(response.body);
    List<Employee> employees =
        await list.map<Employee>((json) => Employee.fromJson(json)).toList();
    employeeDataSource = EmployeeDataSource(employees);
    return employees;
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getDet();
    _columns = getColumns();
    getAttendance();
  }
  void getDet() async {
    SharedPreferences pref = await SharedPreferences.getInstance();
    setState(() {
      firstname = pref.getString('firstname')!;
      lastname = pref.getString('lastname')!;
      employeeID = pref.getString('employeeID')!;
      rfid = pref.getString('rfid')!;
    });
  }
}
 

Attachments

Last edited:
di ko po alam kung paano gawin ito.
print(employeeDataSource);

Sa tingin ko po dito ako may mali.
Yes. Kasi hindi tama yung pag deserialize mo.

Ang ibig sabihin ng Deserialize ay kung paano natin iko-convert yung data from backend (Database/Server) papunta sa pinaka-app. In other languages, ang tawag din sa kanila ay DTO (Data Transfer Object).

So para ma-convert natin yung data from backend, kailangan natin i-reflect kung ano yung mga properties / fields na meron sila.

Sa database mo, meron kang columns na id, logdate, status, at rfid.
1. Pwede mo i-print dun sa php server mo muna kung tama yung fields na nakukuha.

Kung tama,
2. Dapat gumawa ka ng class sa mobile app naman na kaya i-hold yung values from server.
Code:
class EmployeeLogs {
    final int id;
    final int logDate;
    final String status;
    final int rfId;
  
    // Yung key/name na nasa loob ng `[]` brackets ay dapat katulad ng
    // nasa database / server.
    static User fromJson(Map<String, dynamic> json) => User(
        id: json['id']
        logDate: json['logdate'],
        status: json['status'],
        rfid: json['rfid'],
    );
}

3. Pwede mo na sya i-fetch sa loob ng function mo.
Code:
/// Fetch mo yung list of Employee Logs model, hindi yung pinaka-employee model.
Future<void> getAttendance() async {
    final uri = 'http://10.0.17.126/conn/view_data.php/$rfid/$employeeID';
    final response = await http.get(Uri.parse(uri), headers: {
      "Content-type": "applcation/json",
    });
  
    final data = json.decode(response.body);
    final logs = data.map<EmployeeLogs>((json) => EmployeeLogs.fromJson(json)).toList();
  
      print(logs); // print mo muna.
  }

Lagi ka gumamit ng try-catch, very helpful pang debug.
 
Di pa rin po okay sa pag fetch ng data sir. Sa tingin ko po mali yung query ko kase okay naman po kung kukunin ko lahat ng data ng nasa database papunta sa datatable ko sa flutter.
 
Last edited:
Katipunero- boss last question nalang po hehehe paano ko ma coconvert yung logdate(naka unix timestamp po kase) ko papunta sa datetime format(parang Nov. 12, 2021 5:00 pm)
Ito po yung model class ko.
Code:
class Employee {
  String status;
  String logdate;
  Employee({
    required this.status,
    required this.logdate,
  });
  factory Employee.fromJson(Map<String, dynamic> json) {
    return Employee(
      status: json['status'],
      logdate: json['logdate'],
    );
  }
}
sana po matulongan niyo ko.
 
Eto try mo. Please be aware na ito ay Unix timestamp. If gusto mo makuha yung pinaka-date time per region, gamit ka ng toLocal(). Pwede mo to isama sa mga Utils class mo since static sya.

Code:
  /// Converts `int` to `DateTime` format and
  /// returns `[String]` data type.
  ///
  /// Format: MMM dd, yyyy
  static String convertIntUnixToReadableString(int date,
      {DateFormat? formatterDate}) {
    /// Convert the integer back to datetime.
    DateTime dateInUnix = DateTime.fromMillisecondsSinceEpoch(date * 1000);

    /// Format/Customize the DateTime.
    formatterDate ??= DateFormat('MMM dd, yyyy');

    String formattedDate = formatterDate.format(dateInUnix);
    return formattedDate;
  }

Sa DateFormat s, check mo to: You do not have permission to view the full content of this post. Log in or register now.

Usage:​

Code:
final employee = Employee();
final logDateUnix = int.Parse(employee.logDate);
final logDateInString = convertIntUnixToReadableString(logDateUnix,
        formatterDate: _customFormatter);
       
print(logDateInString);
 
Last edited:

Similar threads

Back
Top