Bonjour,
pour m’entraîner, je me suis dit de faire un formulaire de contact en Node.js
j’en suis arrivé à ce code :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | var express = require('express'), swig = require('swig'), mailer = require('express-mailer'), path = require('path'), bodyParser = require('body-parser') app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(express.static(path.join(__dirname, 'public'))); app.engine('html', swig.renderFile); app.set('views', __dirname+'/views'); app.set('view engine', 'html'); app.get('/', function(req, res){ res.render('contact'); }); mailer.extend(app, { from: 'monemail@gmail.com', // host: 'smtp.gmail.com', // hostname port: 587, // port for secure SMTP transportMethod: 'SMTP', // default is SMTP. Accepts anything that nodemailer accepts auth: { user: 'monemail@gmail.com', pass: 'mdp' } }); app.post('/contact', function(req, res, next){ app.mailer.send('email', { to: 'monemail@gmail.com', subject: req.body.subject, message: req.body.message }, function(err){ if(err){ console.error(err); res.send('Une erreur est survenue'); return; } res.send('Email envoyé'); }); }); app.listen(3000); console.log('App is running'); |
et voici le code html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Formulaire de contact</title> <!-- Bootstrap core CSS --> <link href="../public/css/bootstrap.css" rel="stylesheet"> <style> body { padding-top: 50px; } .main{ padding-top: 50px; } </style> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul class="ula"> <li class="btn"><a href="../html/accueil.html">Accueil</a></li> <li class="btn"><a href="../html/moi.html">Qui suis-je</a></li> <li class="btn"><a href="../html/prix.html">Les prix</a></li> <li class="btn"><a href="../html/garanties.html">Les garanties</a></li> <li class="btn"><a href="../php/contact.php">Me contacter</a></li> </ul> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container main"> <form role="form" action="/contact" method="post"> <div class="form-group"> <label for="subject">Sujet</label> <input type="text" name="subject" class="form-control" required placeholder="Sujet"> </div> <div class="form-group"> <label for="message">Message</label> <textarea name="message" class="form-control" required placeholder="Votre message" rows="3"></textarea> </div> <button type="submit" id="submit" class="btn btn-default">Envoyer</button> </form> </div><!-- /.container --> <script> src="https://code.jquery.com/jquery-1.10.2.min.js"</script> </body> </html> |
Le formulaire fonctionne, mais il y a un soucis.
En effet, le css ne s’affiche pas et j’obtiens un résultat comme celui-ci :
Pourtant j’ai bien définis "../public/css/bootstrap.css"
Merci et bonne journée/soirée.
+0
-0
