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

منذ 5 سنوات imadbelasri Nodejs
NS

فهاد الدرس الرابع من دورة 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');
                                                        
                                                    

دروس ذات صلة

NS

دورة nodejs للمبتدئين الدرس الأول

فهاد الدرس الأول من دورة nodejs للمبتدئين غادي نشوفوا شنو هي node js لي كتمكنا باش نخدمو ب...


NS

دورة nodejs للمبتدئين الدرس الثاني

فهاد الدرس الثاني من دورة nodejs للمبتدئين غادي نشوفوا كيفاش نتعاملو مع الملفات.غادي نشوفوا كي...


NS

دورة nodejs للمبتدئين الدرس الثالت

فهاد الدرس الثالت من دورة node js غادي نشوفوا كيفاش نزيدو des pages ف serveur ديالنا لي زدنا منبعد غ...


NS

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

فهاد الدرس الرابع من دورة nodejs للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نديرو نرسلو ا...


NS

دورة nodejs الدرس الخامس

فهاد الدرس الخامس من سلسلة NODE JS للمبتدئين غادي نشوفوا كيفاش ندير la connexion مع la base de donné...


NS

دورة nodejs للمبتدئين الدرس السادس

فهاد الدرس السادس من دورة node js للمبتدئين غادي نكملو الدورة ديالنا منبعد ما شفنا كيفاش زدنا قاعدة...


NS

دورة nodejs للمبتدئين الدرس السابع

فهاد الدرس السابع من دورة nodejs للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا دبا كيفاش نسترجعوا ا...


NS

دورة nodejs للمبتدئين الدرس الثامن

فهاد الدرس الثامن من دورة nodejs للمبتدئين غادي نكملو الدورة ديالنا منبعد مشفنا كيفاش نست...


NS

دورة nodejs للمبتدئين الدرس التاسع

فهاد الدرس التاسع لي غادي يكون مقدمة بسيطة على واحد ل framework js لي هي express js ولي كنخدمو بها م...


NS

دورة nodejs للمبتدئين الدرس العاشر

فهاد الدرس العاشر من دورة nodejs للمبتدئين غادي نكملو الدورة ديالنا وغادي نشوفوا كيفاش نزيدو des pag...