Next JS Code:
Register
"use client";
import { useState } from "react";
import axios from "axios";
const Register = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [fullname, setFullname] = useState("");
const submit = async() => {
const url = "http://localhost/contacts-api/users.php";
const jsonData = {
username: username,
password: password,
fullname: fullname,
};
const formData = new FormData();
formData.append("operation", "save");
formData.append("json", JSON.stringify(jsonData));
const response = await axios({
url: url,
method: "POST",
data: formData,
});
if(response.data == 1){
alert("You have successfully registered!");
}else{
alert("REgistration failed!");
}
};
return (
<>
<h1>Register</h1>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => {
setUsername(e.target.value);
}}
/>
<br />
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => {
setPassword(e.target.value);
}}
/>
<br />
<input
type="text"
placeholder="Full Name"
value={fullname}
onChange={(e) => {
setFullname(e.target.value);
}}
/>
<br />
<button onClick={submit}>Submit</button>
<br />
</>
);
};
export default Register;
Login
"use client";
import { useState } from "react";
import axios from 'axios';
import { useRouter } from 'next/navigation';
import Link from "next/link";
const Login = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const router = useRouter();
const login = async() => {
const url = "http://localhost/contacts-api/users.php";
const jsonData = {username:username, password:password}
var response = await axios.get(url, {
params:{json: JSON.stringify(jsonData), operation: "login"}
});
//check if valid user
if(response.data.length > 0){
let params = new URLSearchParams();
params.append('fullname', response.data[0].usr_fullname);
params.append('userId', response.data[0].usr_id);
router.push(`/main?${params}`);
}else{
alert("Invlid username or password.");
}
}
return (
<>
<h1>Add Records to MySQL Database</h1>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => {
setUsername(e.target.value);
}}
/>
<br/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => {
setPassword(e.target.value);
}}
/>
<br/>
<button onClick={login}>Login</button><br/>
No Account yet? <Link href={'/register'}>Register Here!</Link>
</>
);
};
export default Login;
PHP
<?php
header('Content-Type: application/json');
header("Access-Control-Allow-Origin: *");
class User {
// login
function login($json){
include 'connection-pdo.php';
//{username:'pitok',password:12345}
$json = json_decode($json, true);
$sql = "SELECT * FROM tblusers
WHERE usr_username = :username AND usr_password = :password";
$stmt = $conn->prepare($sql);
$stmt->bindParam(':username', $json['username']);
$stmt->bindParam(':password', $json['password']);
$stmt->execute();
$returnValue = $stmt->fetchAll(PDO::FETCH_ASSOC);
unset($conn); unset($stmt);
return json_encode($returnValue);
}
function save($json){
//{username:'pitok',password:'12345', fullname:'PItok Batolata'}
include 'connection-pdo.php';
$json = json_decode($json, true);
$sql = "INSERT INTO tblusers(usr_username, usr_password, usr_fullname)
VALUES(:username, :password, :fullname)";
$stmt = $conn->prepare($sql);
$stmt->bindParam(':username', $json['username']);
$stmt->bindParam(':password', $json['password']);
$stmt->bindParam(':fullname', $json['fullname']);
$stmt->execute();
$returnValue = $stmt->rowCount() > 0 ? 1 : 0;
unset($conn); unset($stmt);
return json_encode($returnValue);
}
}
//submitted by the client - operation and json data
if ($_SERVER['REQUEST_METHOD'] == 'GET'){
$operation = $_GET['operation'];
$json = $_GET['json'];
}else if($_SERVER['REQUEST_METHOD'] == 'POST'){
$operation = $_POST['operation'];
$json = $_POST['json'];
}
$user = new User();
switch($operation){
case "login":
echo $user->login($json);
break;
case "save":
echo $user->save($json);
break;
}
?>
No comments:
Post a Comment