دورة nodejs الدرس الرابع


فهاد الدرس الرابع من دورة nodejs للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نديرو نرسلو المعلومات من الفورم ومنبعد نعرضوهم فحنا لحد الأن مازل مستعملناش les modules لي كيسهلوا بحال هاد العمليات فمنبعد غادي نشوفوا هادشي.  


1- إضافة الصفحة الرئيسية

فغادي نزيدو ملف جديد ف dossier projet ديالنا سميه index.html  منبعد غادي نزيدوا فيه لفورم ديالنا فالكود ديال الملف هو : 

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <!-- Bootstrap 4 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <title>Form Node js</title>
</head>
<body>
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-6 mx-auto">
                <form method="POST">
                    <div class="form-group"><input type="text" name="name" placeholder="Nom" class="form-control"></div>
                    <div class="form-group"><input type="text" name="email" placeholder="Email"  class="form-control"></div>
                    <div class="form-group"><input type="text" name="password" placeholder="Mot de passe" class="form-control"></div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">Valider</button>
                    </div>
                </form>
            </div>
        </div>
    </div>  
</body>
</html>
                            

2- قرائة محتوى الملف index.html

فباش نقرا الملف index.html اول حاجة كنتحقق واش ل method لي جاتني get يلا كانت كنفتح الملف كيف شفنا فالدروس السابقة من بعد كنقرا المحتوى ديالو وكنعرضوا ولي غادي يكون على هاد الشكل :



الكود لي زدناه هو :

                                const http = require('http');
const fs = require('fs');

http.createServer((req,res)=>{
    let posts = '';
    if(req.method === 'GET'){
        res.writeHead(200,{'Content-Type':'text/html'});
        fs.readFile('./index.html','UTF-8',(err,data)=>{
            if(err) return err;
            res.write(data);
            res.end();
        });
    }
}).listen(3000);
console.log('server running at port 3000');
                            

3- عرض المعلومات من الفورم

منبعد كنزيد التحقق بلي ال method post يعني الكود جاني من الفورم فكنزيد variable posts لي خليتها خاوية منبعد ملي كنستقبل المعلومات من الفورم لي كنخزنها فل variable data كنزيدها ل variable posts.
منبعد ملي كنسالي من استقبال المعلومات من الفورم كنعرضهم ب res.write كيف كنشوف فالصورة :



في حالة كان خطأ كنعرض رسالة خطأ الكود لي زدنا هو :

                                const http = require('http');
const fs = require('fs');


http.createServer((req,res)=>{
    let posts = '';
    if(req.method === 'GET'){
        res.writeHead(200,{'Content-Type':'text/html'});
        fs.readFile('./index.html','UTF-8',(err,data)=>{
            if(err) return err;
            res.write(data);
            res.end();
        });
    }else if(req.method === 'POST'){
        req.on('data',data=>{
            posts+=data;
        });
        req.on('end',()=>{
            res.writeHead(200,{'Content-Type':'text/html'});
            res.write(posts,()=>{
                res.end();
            });
        }); 
    }else{
        res.writeHead(404,{'Content-Type':'text/plain'});
        res.end('404 PAGE INTROUVABLE');
    } 
}).listen(3000);
console.log('server running at port 3000');