How to Add AI to Your Website

index.php file

<form method="POST" action="chat.php">

    <input type="text" name="message" placeholder="Ask anything..." required>

    <button type="submit">Send</button>

</form>

chat.php file

<?php

$apiKey = "YOUR_API_KEY_HERE";

$userMessage = $_POST['message'];

$data = [

    "model" => "gpt-4o-mini",

    "messages" => [

        ["role" => "user", "content" => $userMessage]

    ]

];

$ch = curl_init("https://api.openai.com/v1/chat/completions");

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_HTTPHEADER, [

    "Content-Type: application/json",

    "Authorization: Bearer " . $apiKey

]);

curl_setopt($ch, CURLOPT_POST, true);

curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));

$response = curl_exec($ch);

curl_close($ch);

$result = json_decode($response, true);

echo $result['choices'][0]['message']['content'];

?>

Image Compressor (JavaScript)

 

<input type="file" id="upload" accept="image/*">

<br><br>

<img id="preview" style="max-width:300px;"><br><br>

<a id="download" download="compressed.jpg">Download Compressed Image</a>

<script>

document.getElementById("upload").addEventListener("change", function(e) {

    const file = e.target.files[0];

    if (!file) return;

    const reader = new FileReader();

    reader.onload = function(event) {

        const img = new Image();

        img.onload = function() {

            const canvas = document.createElement("canvas");

            const ctx = canvas.getContext("2d");

            // 🔹 Resize (optional)

            const maxWidth = 800;

            const scale = maxWidth / img.width;

            canvas.width = maxWidth;

            canvas.height = img.height * scale;

            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

            // 🔹 Compress (0.0 - 1.0)

            const quality = 0.6;

            const compressedData = canvas.toDataURL("image/jpeg", quality);

            // Preview

            document.getElementById("preview").src = compressedData;

            // Download link

            document.getElementById("download").href = compressedData;

        };

        img.src = event.target.result;

    };

    reader.readAsDataURL(file);

});

</script>

SQL Prepared Statements ( Very Important Concept )

 

<?php

//database connection

$connect = mysqli_connect("localhost","root","","user");

//prepare statement

$sql = $connect->prepare("insert into datas(name)values(?)");   //?-placeholder

//binding parameters

$sql->bind_param("s",$name);    //s - string, i - integer, d - double

//setting value

$name = "phpecho";  //$_POST['name'];

$sql->execute();   //execute the query

echo "Data inserted successfully.";

?>

Video Link (Sql Prepared Statement)

Promises in JavaScript

 Create Promise

let myPromise = new Promise(function(resolve, reject) {

Condition

let success = true;

If Condition

if (success) {

    resolve("Task Completed");

}

Else Condition

else {

    reject("Task Failed");

}

Handle Success

.then(function(result) {

    console.log(result);

})

Handle Error

.catch(function(error) {

    console.log(error);

});

Full Code :

let myPromise = new Promise(function(resolve, reject) {

    let success = true;

    if (success) {

        resolve("Task Completed");

    } else {

        reject("Task Failed");

    }

});

myPromise

.then(function(result) {

    console.log(result);

})

.catch(function(error) {

    console.log(error);

});

⚡ Flow Summary

Promise created
     ↓
Check condition (success)
     ↓
If true → resolve() → then()
If false → reject() → catch()

🎯 Real-life Example

You ordered food 🍔


If delivered → 
If delivered → resolve("Food arrived")


If not → 
If not → reject("Delivery failed")

MYSQL vs MYSQLI vs PDO

 
<?php

//mysql

//$conn = mysql_connect("localhost","root","");

//$db = mysql_select_db("Your_database_name", $conn);

//mysqli

//$conn = mysqli_connect("localhost","root","","Your_database_name");

//PDO

$conn = new PDO("mysql:host=localhost;dbname=Your_database_name","root","");  

if(!$conn){

echo "Not connected";

}

else{

echo "Connected PDO";

}

?>

Video Link

HTML & CSS Coding The Web s Story

 

🚀 Start Your Coding Journey with WDS!

Students are now stepping into the world of web development by learning HTML & JavaScript at WDS! 💻✨

From building simple web pages to creating interactive features, our training helps students develop real-world skills that matter in today’s digital era.

🔹 Learn HTML to design beautiful web structures
🔹 Master JavaScript to make websites dynamic
🔹 Hands-on projects for practical experience
🔹 Step-by-step guidance from basics to advanced

Whether you're a beginner or looking to upgrade your skills, WDS is the perfect place to grow and succeed in coding!

📈 Build. Learn. Grow.

#WebDevelopment #HTML #JavaScript #CodingStudents #WDS #LearnToCode