CRUD Application With HTML, Bootstrap, JS and PHP & MYSQL
First of All இன்று நாம் பார்க்க இருப்பது என்னவென்றால். ஒரு HTML Form இல் இருந்து எவ்வாறு User Input Data வை Database ற்கு கொண்டு செல்வது என்பது பற்றிய பதிவாகும். So அதற்கு HTML, Bootstrap, JS and PHP , MYSQL போன்ற Language நாம் பாவிக்கப்போகின்றோம். Actually மிகவும் எளிய முறையில் விளங்குவதற்கு ஏற்றாற் போல் இந்தப்பதிவு அமையும் என்பதை தெரிவித்துக் கொள்கின்றேன்.
There For XAMPP ஆனது Server தேவைக்காக பயன்படுத்தியுள்ளோம். உங்களுக்கு ஏற்கனவே தெரிந்திருக்கும் CRUD Application With PHP பண்ண வேண்டும் என்றால் Local Server தேவை அதற்காகத்தான் இதைப்பயன்படுத்தியுள்ளோம். Finally Code எழுதுவதற்காக நாம் VS Code ஐ பயன்படுத்தியுள்ளோம்.
furthermore CRUD Application with PHP என்றால் என்ன
.png "CRUD Application With")
Create , Read , Update and Delete என்பவற்றின் சுருக்கமே CRUD என்பதாகும்.
CRUD Application With PHP continue!!
So படிமுறைகள் வருமாறு
1.முதலில் XAMPP Control Panel Open பண்ண வேண்டும்.
2.அங்கு Apache and Mysql இரண்டையும் Start பண்ண வேண்டும்.
Xampp ஆனது சரியாக வேலை செய்கின்றதா என்பதை ஊர்ஜிதம் செய்க. So அவையிரண்டும் பச்சை நிறத்தில் மாறியிருப்பதை நாம் காணலாம்.
Conclusion is Xampp சரியாக வேலை செய்யத் தொடங்கி விட்டது.
3.நாம் எமது C Drive இல் உள்ள XAMPP Folder இனுள் உள்ள Htdocs இனுள் ஒரு Folder ஐ உருவாக்கி அதற்கு Techshaa எனப்பெயரிட்டுள்ளேன். So அங்கேதான் அனைத்து Project Files இருக்கப்போகின்றது.
4.இப்போது Techshaa Folder இனுள் நாம் Index.php எனும் ஒரு Php File ஐ உருவாக்க வேண்டும் அதற்காக நாம் VScode ஐ Open செய்து கொள்வோம்.
In Addition Yes, I trust the Author என்பதை Click செய்யுங்கள்.
Almost Final Stage வந்துவிட்டோம். After next Coding Part தான்.
இங்கே Bootstrap இற்குரிய CDN ஐதான் நாம் பாவித்துள்ளோம் நீங்களும் அதையே பாவித்துக் கொள்ளுங்கள்.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
இப்பொழுது CRUD Application With PHP
Register Form ற்குரிய Code ஐ கீழுள்ளது போல் Enterபண்ணவும்.
<div class="container">
<div class="d-flex justify-content-center align-items-center vh-100">
<div class="col-md-6 bg-light">
<h2 class="text-center mb-4">Registration Form</h2>
<form action="Index.php" method="POST">
<div class="mb-2">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" name="username" placeholder="Enteryour username">
</div>
<div class="mb-2">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" name="password" placeholder="Enter your password">
</div>
<button type="submit" class="btn btn-primary" name="Save">Register</button>
</form>
</div>
</div>
மேலுள்ள சிறு சிறு Code பற்றி உங்களுக்கு தெரிந்திருக்கும் என்று நினைக்கின்றேன்.
in Addition Output ஆனது இப்படி வந்திருக்கும்.
இங்கு இரண்டு Input Field லுள்ள Data வை Insert பண்ணுவதற்காகவும் Primary Key ற்காகவும் 3 field களை உருவாக்கியுள்ளேன்.Table field அளவுகள் அனைத்தும் காட்டப்பட்டுள்ளது.
After Database Connection Php Code ஐ பார்ப்போம்.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "techshaa";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>மேலே காட்டப்பட்டுள்ள PHP Code ஆனது நமது Database ஐ PHP உடன் இணைப்பதற்கான அனைத்துக் Code ஐயும் கொண்டுள்ளது.
அடுத்ததாக HTML Form இலிருந்து PHP ற்கு Data வை அனுப்புவதற்கான PHP Code வேண்டும்.
if (isset($_POST["Save"])) {
$uname = $_POST["username"];
$pword = $_POST["password"];
$insertsql = "Insert into users(username,password)Values ('$uname','$pword')";
if (mysqli_query($conn, $insertsql)) {
echo "Your data insert Successfully";
} else {
echo "Data Not Insert";
}
}
probably இப்பொழுது நாம் கொடுக்கும் Input ஆனது நமது table ல் Store ஆகியிருப்பதை காணலாம்.
Finally Table ஐ பார்ப்போம் எல்லா Data வும் Store ஆகிவிட்டதா என்று
Almost எல்லாமே Save ஆகிவிட்டதை காணலாம். So CRUD Application With Php இனுடைய C ற்குரிய வேலை முடிந்து விட்டதை காணலாம்.
CRUD Application With Php சம்பந்தமான Another பதிவுகள் இன்னும் தொடரும் என்பதை தெரிவித்துக் கொள்கின்றோம்.
CRUD Application With PHP பற்றி வாசித்தமைக்கு நன்றி.
இன்னும் பல சுவாசியமான முக்கியமான மற்றும் தொழிநுட்பம் சார்ந்த பதிவுகள் வெளிவரும். நன்றி மீண்டும் வருக
