React Native Login connect with sql server ?
Tags: react
Published: 2024-03-15 03:47:49

I created a Login application that connects to the sql server using Visual Studio Code. The Login and SignUp application logs into the sql server to read the Table 'TABUSERNAME' and export it to the grid, but I get an error, my computer's sql server information:

user: 'sa'
pass: 'Coffee'
server:'MICROSOFT' or '192.168.1.100'
database: 'Cafe'

ERROR Cannot convert null value to object, Can you please fix my code errors ?

File: App.js
Code:
`//App.js
import React, { useState } from 'react';
import { StyleSheet, View, TextInput, Button, FlatList, Text } from 'react-native';
import SQLite from 'react-native-sqlite-storage';
//import axios from 'axios';

const App = () => {
  // Kh?i t?o state ?? l?u tr? thông tin ng??i dùng
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');  
  const [sqliteData, setSqliteData] = useState([]); // Thêm 'sqliteData' vào danh sách các state


  // Hàm x? lý khi ng??i dùng nh?n nút Login
  const handleLogin = async () => {
    
    //console.log('login1');
    try {
      // K?t n?i ??n c? s? d? li?u
      const db = SQLite.openDatabase(
        {          
          name: 'Cafe.db',
          location: 'default',
          //createFromLocation: '~www/test.db',
        },
        () => {
          console.log('Connected to the database.');
        },
        (error) => {
          console.error('Failed to connect to the database.', error);
        }
      );
            
      // Th?c hi?n truy v?n SQL ?? l?y d? li?u t? b?ng
      db.transaction(tx => {
        tx.executeSql(
          'SELECT * FROM TABUSERNAME',
          [],
          (_, result) => {
            if (result.rows) {
              const rows = result.rows.raw();
              setSqliteData(rows); // L?u tr? d? li?u t? SQLite vào state 'sqliteData'
            } else {
              console.log('No rows returned from the query.');
            }
          },
          error => {
            console.error('Failed to execute query.', error);
          }
        );
      });
      
      // ?óng k?t n?i c? s? d? li?u khi không s? d?ng n?a
      //return () => {
      db.close();
      console.log('Database connection closed.');
      //};

    } catch (error) {
      console.error(error.message);
    }
  };

   
  // Hàm x? lý khi ng??i dùng nh?n nút Signup
  const handleSignup = async () => {
    try {
      //
    } catch (error) {
      console.error(error.message);
    }
  };
  

  return (
    <View style={styles.container}>
      
      <View style={styles.list}>
        {/* Hi?n th? d? li?u trong ô l??i */}
        <FlatList
          data={sqliteData}
          renderItem={({ item }) => <Text>{JSON.stringify(item)}</Text>}
          keyExtractor={(_, index) => index.toString()}
        />
      </View>
      
      <View style={styles.inputText}>
        <View style={styles.text}>
         <View style={styles.user}>
         {/* H?p v?n b?n ?? ng??i dùng nh?p tên ng??i dùng */}
            <TextInput placeholder="Username" onChangeText={setUsername} />
         </View>
         <View style={styles.pass}>
            {/* H?p v?n b?n ?? ng??i dùng nh?p m?t kh?u */}
            <TextInput placeholder="Password" onChangeText={setPassword} secureTextEntry={true} />
         </View>
        </View>



        <View style={styles.button}>
          <View style={styles.login}>
              {/* Nút ?? th?c hi?n ch?c n?ng ??ng nh?p */}
              <Button title="Login" onPress={handleLogin} />
          </View>
          <View style={styles.signup}>
              {/* Nút ?? th?c hi?n ch?c n?ng ??ng ký */}
              <Button title="Signup" onPress={handleSignup} />
          </View>
        </View>
      </View>
         

      
    </View>
  );
};

export default App;


const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor : '#e7feff',      

  },
  list: {
    
  },
  inputText : {
    top: 340,    
    
  },
  text : {
    marginLeft : 30,
  },
  
  button : {
    width : 360,
    height : 150,
    marginHorizontal : 20,
    justifyContent : 'center',

  },
  login : {
    
  },

  signup : {
    top : 20,  
    },

  })`

File: server.js
Code:

`// server.js
const express = require('express');
const bodyParser = require('body-parser');
const sql = require('mssql');

const app = express();
const port = 3000;

app.use(bodyParser.json());

const config = {
  user: 'sa',
  password: 'Coffee',
  server: 'MICROSOFT',
  database: 'Cafe',
};

app.post('/login', async (req, res) => {
  try {
    await sql.connect(config);
    const result = await sql.query(`SELECT * FROM TABUSERNAME WHERE USERNAME='${req.body.username}' AND PASSWORDS='${req.body.password}'`);
    sql.close();
    res.json(result.recordset);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});`

See attached image file

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fmax3wxcmutfmqvfp89.jpg)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74oue66nkl6ye6ga0iee.jpg)