ระบบ Login
1
2
3.1 Login
3.2 Register
3.3 Home Page
3
ดาวน์โหลด XAMPP และติดตั้งให้เรียบร้อย
https://www.apachefriends.org/
4
Start Apache และ MySQL
5
การแก้ไขปัญหา XAMPP เปิด MySQL ไม่ได้
6
7
8
localhost:81 / 127.0.0.1 | phpMyAdmin 5.2.1
9
ตัวอย่าง phpMyAdmin ไม่แสดงภาษาไทย วิธีแก้ไข
10
ที่มา : https://www.devdit.com/post/3631/phpmyadmin-ไม่แสดงภาษาไทย-วิธีแก้ไข#gsc.tab=0
11
Create Database ชื่อ flutter_mydb
12
Create Table ชื่อ users โดยมี 4 Attribute ดังรูป
13
Structure of users table
14
ไฟล์ connect.php
15
<?php
$db_name = "flutter_mydb";
$db_user = "root";
$db_pass = "";
$db_host = "localhost";
�$con = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
�if ($con->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
ไฟล์ connect.php (สำหรับสำเนาโค้ด)
16
ไฟล์ login.php
17
<?php
require "connect.php";
if (!$con) {
echo "connection error";
}
$email = $_POST['email'];
$password = $_POST['password'];
$encrypted_pwd = md5($password);
$sql = "SELECT * FROM user WHERE email = '" . $email . "' AND password = '" . $encrypted_pwd . "' ";
$result = mysqli_query($con, $sql);
$count = mysqli_num_rows($result);
�if ($count == 1) {
echo json_encode("Success");
} else {
echo json_encode("Error");
}
?>
ไฟล์ login.php (สำหรับสำเนาโค้ด)
18
ไฟล์ register.php
19
<?php
require "connect.php";
if (!$con) {
echo "connection error";
}
�$name = $_POST['name'];
$password = $_POST['password'];
$email = $_POST['email'];
$encrypted_pwd = md5($password);
$sql = "SELECT * FROM users WHERE email = '$email'";
��$result = mysqli_query($con, $sql);
$count = mysqli_num_rows($result);
�if ($count == 1) {
echo json_encode('Error');
} else {
$insert = "INSERT INTO users(name,password,email)VALUES('$name','$encrypted_pwd','$email')";
$query = mysqli_query($con, $insert);
if ($query) {
echo json_encode('Succeed');
}
}
?>
ไฟล์ regtister.php (สำหรับสำเนา)
20
นำไฟล์ php ทั้งหมด อยู่ในโฟลเดอร์ login_php �ซึ่งอยู่ในโฟลเดอร์ htdocs ของ XAMPP
21
ทดลองติดต่อฐานข้อมูล ด้วย register.php จะต้อง “Succeed”
http://127.0.0.1:81/login_php/register.php
22
Flutter_login
23
สร้างโปรเจคชื่อ flutter_login และ Run AVD
24
สร้างไฟล์ login_page.dart ที่โฟลเดอร์ lib
สร้างคลาส LoginPage เป็นแบบ StatefullWidget
25
นำเมาท์ไปที่ LoginPage แล้วเพิ่ม Constructors และ Override
26
1) เพิ่มคลาส _LoginPage ดังรูป �2) แล้วให้คลาส LoginPage รีเทิร์นคลาสไปที่คลาส _LoginPage
1)
2)
27
ที่คลาส _LoginPage ให้เพิ่ม Override build
28
ที่คลาส _LoginPage รีเทิร์น Scaffold ( ); อย่าลืมจบด้วย ;
ใส่ body, Center, childText( ) ดังรูป แล้วใส่ const
29
1) Import ไฟล์ login_page.dart
กลับไปที่ไฟล์ main.dart
2) เปลี่ยน theme เป็น สีดำมืด�3) แก้ไข home เรียนก LoginPge( ),
4) ลบคลาส ที่ไม่เกี่ยวข้อง ออกทั้งหมด� ตั้งแต่บรรทัดคลาส MyHomePage� ลงมาทั้งหมด
30
Run AVD จะต้องได้ดังรูป
โดยเรามี 2 ไฟล์�1. main.dart � เป็นแบบ StatelessWidget ��2.login_page.dart� เป็นแบบ StatefulWidget
31
Flutter_login
(ต่อ)
32
กลับมาที่ไฟล์ login_page.dart
1) เพิ่มตัวแปรจัดการ ฟอร์ม �_formKey �_navigatorKey
2) เพิ่มตัวแปร เชื่อม TextEdit
_usernameController
_passwordController
33
แก้ไข return ของเดิมตัวอย่าง ให้รีเทิร์น Navigator( ); ดังรูป
34
เพิ่ม onGenerateRoute ใส่ Setting แบบมี { }
ใส่ //1 ปิดหัวท้าย �เพื่อให้ทราบขอบเขต
35
เพิ่ม return MaterailPageRoute( ); อย่าลืมใส่ ; ปิดท้าย
เปลี่ยน builder เป็น (context) โดยให้ retrun Scafflod( )
36
37
เพื่อความเข้าใจขอบเขตของ Padding �1) Enter ตรง Padding ให้ลงมา และจัดวงเล็บ ให้ตรงกัน�2) ใส่คอมม่า , หลัง EdgeInsert.all( ),�3) ใส่ //2 ปิดหัวท้าย
38
เมื่อกดปุ่ม Save โปรแกรม VC Code จะจัดรูปแบบดังรูป
39
1) เพิ่ม chaild : Form( ) และใส่ Key�2) เพิ่ม chaild และใส่ Column( ) และ Children : [ ]
40
1) ใน Array [ ] เพิ่ม Image.network(scr) แล้ว width height ดังรูป
https://www.rmutt.ac.th/wp-content/uploads/2023/01/20210202-logo-RMUTT-News-1024x341.png
2) ตรง scr ให้ใส่ url ของรูปภาพ เช่น
41
SAVE และ lunching ไปที่ AVD
42
ต่อจาก Image.network( ), อย่าลืมใส่เครี่องหมายคอมม่าคั่น�เพิ่ม TextFormField( ),
43
ที่ TextFormField( )
ใส่ controller : เชื่อมกับตัวแปรสถานะที่สร้างไว้
ใส่ decoration : InputDecoration( ) ดังรูป
เพิ่ม const ให้ InputDecoration( )
44
SAVE และ lunching ไปที่ AVD
จะมี TextFormField
username ดังรูป
45
เพิ่มการตรวจสอบค่าว่าง ให้กับ TextFormField( ) �ด้วย validator : ให้ค่า value ตรวจเชค .isEmpty
46
ต่อจาก TextFormFile( ), ของ username อย่าลัมคอมม่าคั่น�ให้เพิ่ม TextFormFiled( ) ของ password ดังรูป
47
SAVE และ lunching ไปที่ AVD
48
ต่อจาก TextFormFile( ), ของ password อย่าลัมคอมม่าคั่น�ให้เพิ่ม SizeBox( ) ความสูง 24 ดังรูป
49
ต่อจาก SizeBox( ) , อย่าลัมคอมม่าคั่น�ให้เพิ่ม ElevatedButton( ), จะมีพารามิเตอร์ คือ onPressed กับ Child
50
1) onPressed ให้เพิ่มฟังก์ชัน ( ) { } �2) ในวงเล็บปีกกา ให้เขียน if ตรวจสอบ currentState ของ _formKey
51
1) Child ให้เพิ่ม Text(‘Logint’) �2) แล้วใส่ const ตามลำดับ
52
SAVE และ lunching ไปที่ AVD
53
ใต้ Column( ระหว่าง children: �เพิ่ม mainAxisAlignment เพื่อให้หน้า Login อยู่ตรงกลางฟอร์ม
54
SAVE และ lunching ไปที่ AVD
55
พักหน้า Login ไว้ก่อน
56
Register
57
58
https://drive.google.com/file/d/1MUO-k5paz0DwMHogcN8ILmOtJTVmSsbS/view?usp=sharing�
2) Copy ไฟล์ register_ui_only.dart
ไปไว้ในโฟลเดอร์ lib ของโปรเจคที่สร้าง
3) เปลี่ยนชื่อเป็น register.dart
59
import register.dart และแก้ไข home เรียก register( )
60
import package และ dart ส่วนที่เกี่ยวข้อง
61
62
ใส่ Form( ) ครอบ UI ทั้งหมด �1) คลิกที่ ListView �2) คลิกที่รูปหลอดไฟสีเหลือง
3) คลิก Wrap with widget…
63
4) แก้ไข Widget เป็น Form
64
ประกาศตัวแปรต่างๆ ดังนี้
65
เขียนฟังก์ชัน เชื่อมต่อเว็บไซต์ php ด้วย asysnc{ }
1) เพิ่ม Import ‘dart:async’; �2) เขียนฟังก์ชัน sing_up( )
66
ชื่อจะต้องกับค่า ใน register.php
67
เพิ่ม ตัวแปร เช็คการตอบกลับ
68
ใส่การตรวจสอบ validator: และ controller: ให้กับค่า Name
69
ใส่การตรวจสอบ validator: และ controller: ให้กับค่า E-mail
70
ใส่การตรวจสอบ validator: และ controller: ให้กับค่า Password
71
ใส่การตรวจสอบ validator: ให้กับค่า RE-Type Password
72
73
ไปที่ Form( ให้ประกาศ key : formKey, เพื่อเรียกใช้ตัวแปร formKey
74
SAVE และ lunching ไปที่ AVD
75
บันทึกข้อมูล your data
76
ตรวจสอบข้อมูล บันทึกลงฐานข้อมูล หรือไม่ ?
77
Q/A