Halaman Web Node.js Bagian 2: 7 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:56

Selamat datang di BAGIAN 2!!

Ini adalah bagian 2 dari tutorial aplikasi situs web Node.js saya. Saya membagi tutorial ini menjadi dua bagian karena memisahkan mereka yang hanya membutuhkan pengenalan singkat dan mereka yang menginginkan tutorial lengkap di halaman web.

Saya akan pergi melalui pembuatan situs saya. Anda mungkin berbeda, jadi ikuti saya dan pelajari teknik yang digunakan. Setelah Anda memilih template HTML yang berbeda, alurnya akan sedikit berbeda. Ingatlah ini.

Langkah 1: Struktur Aplikasi

Jadi situs saya mengikuti generator ekspres, namun saya menggunakan setang daripada batu giok. Jika Anda suka batu giok, lakukanlah! Jade adalah HTML tangan pendek tanpa semua tanda kurung dan div. Jika Anda tidak mengerti, Anda mungkin ingin mengunjungi youtube dan menonton beberapa tutorial HTML.

Saya lebih suka dan lebih nyaman dengan HTML dan setang jadi itulah yang saya gunakan. Untuk membuat proyek ekspres dengan setang, jalankan perintah ekspres.

express --hbs nameofmyapp

Kemudian lanjutkan mengikuti langkah di Bagian 1 untuk menginstal semua middle-ware.

Express membuat struktur aplikasi yang sangat spesifik dan sangat berguna. Sebagian besar aplikasi node.js mengikuti formulir ini dengan beberapa variasi.

Pada foto terlampir Anda dapat melihat folder dan file yang berbeda, di bawah ini saya mencoba menjelaskan semua ini.

tempat sampah

Ini adalah folder yang dijalankan pertama kali ketika node.js memulai server Anda. Itu terlihat ke file www dan mengikuti file ini untuk dieksekusi. File www memberi tahu node.js untuk memulai server pada port 3000 (ini dapat berubah menjadi apa saja) dan melakukan beberapa hal lain seperti pendengar acara dan semacamnya. Yang terpenting adalah port tempat aplikasi Anda diatur.

simpul_modul

Di folder inilah yang disebut middle-ware. Middle-ware Saya ingin menjelaskan sebagai perangkat lunak tambahan untuk mempermudah Anda dalam membuat kode. Mereka pada dasarnya adalah perpustakaan lain dengan fungsi yang dibuat sebelumnya untuk Anda gunakan. Beberapa middleware tambahan yang saya gunakan untuk proyek ini adalah Nodemailer, Passport, Nodemon, bycrypt, dan lain-lain.

publik

Di sinilah semua gambar, CSS, dan javascript untuk situs web Anda akan pergi. Ini langsung digunakan oleh halaman web.

rute

Ini adalah menentukan rute untuk situs Anda. Seperti homepage, halaman login, dan lain-lain.

dilihat

Seperti yang Anda lihat, tampilannya adalah file.hbs atau.handbars, keduanya akan berfungsi, hanya perlu beberapa manipulasi file app.js. Ini adalah halaman html setang Anda yang akan ditampilkan di browser. Layout adalah file layout utama Anda dan terkadang ada di sub folder layoutnya sendiri. File tata letak utama memanggil file setang Anda yang lain dan menampilkannya, ini akan lebih masuk akal ketika kita menyelami kodenya.

app.js

Ini adalah file aplikasi utama Anda, terkadang ini disebut server, hanya tergantung pada pengaturan. File ini memiliki semua konfigurasi untuk server dan bahkan beberapa fungsi khusus. Ini juga akan menjadi penangan kesalahan.

package.json

File ini dibuat oleh express dan memberi tahu npm semua middleware yang ingin Anda gunakan dalam proyek Anda. Setelah Anda menjalankan npm install, semua middle-ware yang dipanggil dalam file ini, akan diinstal di folder node_modules.

Langkah 2: Tata Letak Template Anda

Anda dapat membuat semua HTML Anda dari awal atau Anda dapat menggunakan template. Saya telah menggunakan template untuk situs ini. Situs lain yang telah saya bantu kembangkan telah saya kodekan dari awal. Pilihan ada di tangan Anda, langkah ini menjelaskan tata letak template.

Aplikasi web saya menggunakan template bootstrap yang hebat dalam membuat CSS yang luar biasa. Untuk menemukan template kunjungi situs ini. Seperti yang dinyatakan sebelumnya pada langkah sebelumnya semua file css, js, dan img yang dibutuhkan berada di bawah folder publik. File-file ini membuat situs terlihat lebih baik daripada teks biasa dan bagaimana gambar digunakan di situs.

Untuk membuat gaya templating setang bekerja dengan templat Halaman-halaman dibagi menjadi dua bagian. Yang pertama adalah apa yang disebut sebagai "tata letak". Tata letak adalah properti yang ingin Anda tampilkan di setiap halaman web dalam situs Anda. Dalam kasus saya ini adalah header, yang memiliki bilah navigasi, dan footer, yang menyimpan navigasi tambahan dan potongan tampilan.

File tata letak dan file setang lainnya ada di folder tampilan. Saya akan membahas tata letak yang lebih sederhana dari generator ekspres yang Anda gunakan sebelumnya untuk menampilkan cara kerja konsep, lalu Anda dapat melihat kode saya dan membandingkannya.

File layout.handbars yang dihasilkan secara ekspres

{{judul}} {{{tubuh}}}

Keajaiban setang yang sebenarnya ada di setang {{title}} dan {{{body}}}. Jadi keduanya bertindak berbeda {{title}} adalah variabel yang diteruskan dari file index.js di rute, setelah diteruskan ke template, variabel itu akan ditampilkan. Tag {{{body}}} mengambil apa pun yang dipanggil dalam fungsi render di file js route Anda. Dalam kasus kami index.js memiliki baris ini:

res.render('index', { judul: 'Express', count: userCount});

Ini memanggil file 'indeks' dari mesin apa pun yang Anda gunakan, batu giok, setang, dan sebagainya, jadi dalam kasus kami index.handbars.

Index.handbars yang dihasilkan secara ekspres

{{judul}}

Selamat datang di {{title}}

File index.handbars diteruskan seperti variabel ke tag {{{body}}} dan ditampilkan di halaman web Anda.

Ini memungkinkan Anda untuk memiliki bagian statis situs web Anda dan bagian variabel. Ini membuat header dan footer bagus karena Anda tidak perlu merender ulang seluruh halaman, saat memuat halaman baru, hanya beberapa informasi yang diubah.

Langkah 3: Formulir Kontak

Saya memasukkan formulir kontak ke halaman web saya sehingga siapa pun dapat mengirim email ke email situs saya, dengan pertanyaan atau komentar.

Formulir kontak ini menggunakan middle-ware npm yang disebut Node Mailer.

Menyiapkan Node Mailer

Untuk menginstal node-mailer Anda hanya perlu menjalankan kode di bawah ini di file tingkat atas Anda, dalam kasus kami, myapp.

sudo npm instal nodemailer

Setelah terinstal, Anda perlu menyiapkan beberapa hal di file app.js Anda.

Yang pertama hanya ketergantungan, ini memberitahu node bahwa kami berencana untuk menggunakan middleware ini.

var nodemailer = membutuhkan('nodemailer');

Kedua adalah transporter kami, transporter digunakan untuk terhubung ke server email Anda, dalam kasus saya gmail.

//Transporter digunakan untuk mendapatkan akun gmail

var transporter = nodemailer.createTransport({ service: 'gmail', auth: { type: 'OAuth2', user: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.apps.google clientSecretcom': 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', token akses: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-mk-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

jika menggunakan nodemailer dengan server email yang berbeda, silakan lihat di sini untuk dokumentasi dan bantuan.

Beberapa hal akan berubah dari orang ke orang: pengguna, clientId, clientSecret. refreshToken, dan accessToken.

UserId Anda adalah email yang ingin Anda gunakan, saya membuat yang baru bernama sama dengan situs saya.

ClientId, clientSecret, refreshToken, dan accessToken perlu ditemukan melalui akun google Anda.

Jika Anda membutuhkan bantuan lebih lanjut, Anda dapat mengikuti video ini di sini.

Setelah semua bidang tersebut diisi, kami akan menambahkan detail pesan kami.

Selanjutnya kita perlu memvalidasi bahwa semua bidang dalam formulir kita telah dimasukkan dan merupakan tanggapan yang valid.

// Express Validatorapp.use(expressValidator({ errorFormatter: function(param, msg, value) { var namespace = param.split('.'), root = namespace.shift(), formParam = root; while(namespace.length) { formParam += '[' + namespace.shift() + ']'; } return { param: formParam, msg: msg, value: value }; } }));

Kami sekarang perlu mendapatkan informasi dari formulir kontak kami di halaman web kami dan mengirim pesan.

//Posting dari tombol kirim kontak, perlu membuat beranda dengan pesan sukses untuk formulir yang dikirimkanapp.post('/contact_Form', function(req, res){ //Dapatkan informasi dari formulir kontak, dari homepage.hbs var name = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = { //membuat informasi yang digunakan saat mengirim pesan dari: ' Email Otomatis', ke: '[email protected]', subjek: 'Formulir Kontak Situs Web: ' + nama, teks: 'Anda telah menerima pesan baru dari formulir kontak situs web Anda.\n\n' + 'Di sini adalah detailnya:\n\nNama: ' + nama + '\n\nEmail: ' + email + '\n\nTelepon: ' + telepon + '\n\nPesan:\n' + pesan } transporter.sendMail(mailOptions, function (err, res) { if(err){ console.log('Error'); }else { console.log('Email Terkirim'); } }) res.render('index'); //render beranda baru, lihat bagaimana melakukan ini dengan pesan sukses, seperti halaman logout })

Kilatan

Flash digunakan untuk menampilkan pesan setelah tindakan dilakukan. Anda dapat melihat ini saat mengirimkan formulir, atau tidak memasukkan bidang dengan benar.

Instal flash seperti middleware npm lainnya.

sudo npm install connect-flash

var flash = membutuhkan('koneksi-flash'); //memiliki fungsi flash untuk ditampilkan di pesan layar

// Hubungkan Flashapp.use(flash());

Aktifkan flash yang mendorong dan memperbarui pesan di halaman web. Ini adalah pesan yang mengatakan hal-hal seperti sukses, atau informasi yang dimasukkan salah.

// Global Vars

app.use(function (req, res, next) { res.locals.success_msg = req.flash('success_msg'); res.locals.error_msg = req.flash('error_msg'); res.locals.error = req.flash('error'); res.locals.user = req.user || null; next(); });

Beberapa membutuhkan variabel yang terkait dengan flash.

Ini dia formulir kontak yang dibuat.

Langkah 4: Halaman Masuk

Ini hanya sesuatu yang saya ingin lihat apakah saya bisa melakukannya dan mungkin saya akan menggunakannya di masa depan. Saya hanya ingin menjelaskan kode seperti yang ada di repositori git saya.

Jadi bagian ini menggunakan beberapa perangkat tengah npm lagi. Instal yang berikut menggunakan perintah di bawah ini.

npm instal paspor && npm instal paspor-lokal && npm instal bcryptjs

&& memungkinkan Anda menjalankan banyak perintah dengan satu baris.

Masuk dan Pengguna

Anda perlu membuat file login.js dan user.js di bawah folder rute Anda. Ini akan digunakan untuk memungkinkan pembuatan pengguna, yang akan disimpan dalam database kami, dan memungkinkan pengguna untuk login dengan memeriksa database.

pengguna.js

var express = membutuhkan('ekspres');var router = express. Router(); var paspor = membutuhkan('paspor'); var LocalStrategy = membutuhkan('paspor-lokal'). Strategi; var Pengguna = membutuhkan('../model/pengguna'); // Daftarkan router.get('/register', function(req, res){ res.render('register'); }); //Register User router.post('/register', function(req, res){ var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.body.password; var password2 = req.body.password2; // Validasi req.checkBody('name', 'Name is required').notEmpty(); req.checkBody('email', 'Email diperlukan').notEmpty(); req.checkBody('email', 'Email tidak valid').isEmail(); req.checkBody('username', 'Username diperlukan').notEmpty(); req.checkBody(' kata sandi', 'Kata sandi diperlukan').notEmpty(); req.checkBody('password2', 'Kata sandi tidak cocok').equals(req.body.password); var error = req.validationErrors(); if(error){ res.render('register', { error:errors }); } else { var newUser = new User({ name: name, email:email, username: username, password: password }); User.createUser(newUser, function(err, user){ if(err) throw err; console.log(user); }); req.flash('success_msg', 'Anda telah terdaftar dan sekarang dapat login'); res.redirect(' /Gabung'); } });

Memecah ini sepotong demi sepotong

Pertama kami menyertakan semua perangkat tengah yang diperlukan, lalu kami menyertakan file model kami yang dijelaskan di bawah ini. Kami merutekan dari tag register dan menampilkan teks setang register kami. Kemudian fungsi penting datang. Ini memungkinkan kami untuk mendaftarkan pengguna baru di database kami. Fungsi ini memeriksa untuk memastikan semua bidang valid dan disertakan dalam formulir, jika tidak, ia akan memintanya. Selanjutnya memeriksa kesalahan, dan jika tidak terjadi kesalahan, ia membuat pengguna baru dengan informasi yang diberikan. Kemudian merutekan kembali ke halaman login, memungkinkan Anda untuk login.

login.js

var ekspres = membutuhkan('ekspres');

var router = express. Router();var paspor = membutuhkan('paspor'); var LocalStrategy = membutuhkan('paspor-lokal'). Strategi; var Pengguna = membutuhkan('../model/pengguna'); /* DAPATKAN daftar pengguna. */ //Homepage router.get('/', function(req, res){ res.render('login'); }); passport.use(new LocalStrategy(function(username, password, done) { User.getUserByUsername(username, function(err, user){ if(err) throw err; if(!user){ return done(null, false, { pesan: 'Pengguna Tidak Dikenal'}); } User.comparePassword(password, user.password, function(err, isMatch){ if(err) throw err; if(isMatch){ return done(null, user); } else { return done(null, false, {pesan: 'Kata sandi tidak valid'}); } }); }); })); passport.serializeUser(function(user, done) { done(null, user.id); }); passport.deserializeUser(function(id, done) { User.getUserById(id, function(err, user) { done(err, user); }); }); router.post('/login', passport.authenticate('local', {successRedirect:'/', failureRedirect:'/login', failureFlash: true}), function(req, res) { res.redirect('/ dasbor'); }); router.get('/logout', function(req, res){ req.logout(); req.flash('success_msg', 'Anda keluar'); res.redirect('/homepage'); });

modul.ekspor = router;

Pertama kami menyertakan semua perangkat tengah yang diperlukan, lalu kami menyertakan file model kami yang dijelaskan di bawah ini. Kami merutekan dari tag login dan menampilkan teks setang login kami. Kami kemudian menggunakan beberapa fungsi paspor untuk mengambil nama pengguna dan kata sandi yang dimasukkan dan memeriksanya terhadap database kami. Kami akan menggunakan kata sandi terenkripsi juga yang dapat membuat login sedikit lambat pada raspberry pi. Saya menjelaskan ini lebih lanjut selanjutnya. Setelah memvalidasi nama pengguna dan kata sandi, Anda diarahkan ke beranda yang akan menampilkan dasbor saat kami mengaturnya di file indeks kami. Kami juga menambahkan di sini kemampuan untuk keluar.

Seperti yang saya sebutkan sebelumnya, kita juga perlu membuat model untuk memeriksa database.

Ini dilakukan dengan membuat folder di bawah folder aplikasi utama Anda yang disebut model. Di folder ini juga diperlukan file user.js.

model/pengguna.js

var luwak = membutuhkan('luwak');

var bcrypt = membutuhkan('bcryptjs'); // Skema Pengguna var SkemaPengguna = luwak. Skema({ nama pengguna: { type: String, indeks:true }, kata sandi: { type: String }, email: { type: String }, nama: { type: String } }); var Pengguna = module.exports = luwak.model('Pengguna', UserSchema);

module.exports.createUser = function(newUser, callback){

bcrypt.genSalt(10, function(err, salt) { bcrypt.hash(newUser.password, salt, function(err, hash) { newUser.password = hash; newUser.save(callback); }); }); } module.exports.getUserByUsername = function(nama pengguna, panggilan balik){ var query = {nama pengguna: nama pengguna}; User.findOne(permintaan, panggilan balik); } module.exports.getUserById = function(id, callback){ User.findById(id, callback); } module.exports.comparePassword = function(candidatePassword, hash, callback){ bcrypt.compare(candidatePassword, hash, function(err, isMatch) { if(err) throw err; callback(null, isMatch); }); }

Model ini menguraikan seperti apa parameter pengguna kami serta bagaimana kami akan mengaksesnya. Saya sebutkan sebelumnya bahwa kami akan mengenkripsi kata sandi kami. ini agar tidak ada kata sandi yang disimpan dalam database jika terjadi pelanggaran. Kata sandi di-hash menggunakan bcrypt middle-ware.

Langkah 5: Penghitung Lalu Lintas

Saya ingin melihat berapa banyak pengguna unik yang mengunjungi halaman web saya dan menghitung jumlah "hit". Ada banyak cara untuk melakukan ini, saya akan menjelaskan bagaimana saya melakukannya.

Ini menggunakan koleksi mongodb untuk melacak berapa banyak pengguna yang telah mengunjungi halaman saya dan berapa kali setiap pengunjung unik mengunjungi.

Karena kita telah berbicara tentang pengaturan mongoDB, saya tidak akan membahasnya lagi.

Anda mungkin perlu menambahkan dua koleksi ke database Anda untuk dikompilasi. Untuk melakukan ini, Anda dapat menginstal RoboMongo jika menggunakan UI, namun jika Anda menggunakan raspberry pi tanpa kepala seperti saya, Anda akan menjalankan perintah berikut.

kulit mongo

Untuk mengedit db, mendapatkan informasi, atau membuat koleksi, Anda memerlukan shell mongo pada unit tanpa kepala.

Lari

mongo

Ini akan membuka cangkangnya.

Tambahkan koleksi

Dalam kasus saya, basis datanya disebut loginapp, Anda dapat memberi nama apa pun yang Anda inginkan.

gunakan nameofyourdb

Kami membutuhkan koleksi untuk menampung semua alamat ip kami dari pengguna yang mengunjungi situs kami.

db.createCollection("ip")

Selanjutnya kita membuat koleksi untuk menghitung unique hits ke situs kita. Ini diinisialisasi dengan id dan menghitung mulai dari 0.

db.createCollection("count", {id: "hit counter", count:0})

Lacak Alamat IP

Untuk melakukan ini, kami akan menarik Ip pengguna ketika mereka mengunjungi beranda kami, menambah jumlah kami, dan menyimpannya untuk membandingkannya nanti.

Kita perlu membuat beberapa model untuk menyimpan skema luwak kita, dan menambahkan beberapa kode ke file homepage.js kita.

Kami membuat count.js dan ip.js dan menyimpannya di folder model kami.

File ip.js hanyalah skema untuk alamat ip kami

var luwak = membutuhkan('luwak'); //pengelola paket untuk mongo

//Count Schema var IpSchema = luwak. Schema({ ip: { type: String, }, count: { type: Number, } }); var Ip = module.exports = luwak.model('Ip', IpSchema);

count.js akan dipanggil oleh beranda kami untuk memulai pelacakan klik. Ini dilakukan seperti di bawah ini.

//Homepagerouter.get('/', function(req, res){ publicIp.v4().then(ip => { Public_ip = ip; console.log("ipv4: "+ Public_ip); //=> ' 46.5.21.123' }); publicIp.v6().then(ip => { console.log("ipv6" + ip); Public_ip=ip; //=> 'fe80::200:f8ff:fe21:67cf' });

Count.getCount(koleksi, ipc, Public_ip, function(count){

}); count = db.collection('count').findOne({id: "hit counter"}, function(err, count){ userCount = count.count; res.render('homepage', {count: userCount}); }); });

Hal ini terjadi setiap kali seseorang membuka homepage kita, dalam hal ini theinternet.onthewifi.com/homepage.

Itu memeriksa IP pengguna, ip4 atau ip6, dan kemudian menyimpan nilai itu di mana ia mengirimkannya ke count.get.collection yang merupakan fungsi yang disimpan dalam file count.js kami.

Setelah memeriksa keunikan pengguna, ia kemudian mengembalikan dan memposting nilai hitungan ke beranda sebagai variabel setang.

File count.js adalah sebagai berikut.

//count.jsvar mongo = membutuhkan('mongodb'); //mendukung database var luwak = membutuhkan('luwak'); //paket handler untuk mongo mongoose.connect('mongodb://localhost/loginapp'); var db = luwak.koneksi; var Ip = membutuhkan('../model/ip'); //Count Schema var CountSchema = luwak. Schema({ id: { type: String, }, count: { type: Number, } }); var Hitungan = module.exports = luwak.model('Hitung', CountSchema); module.exports.getCount = function(count, ipc, Public_ip, callback){ //count is test, callback isfunction ipc.findOne({ip: Public_ip}, function(err, iptest){ if(!iptest)//add ip baru jika tidak ada di database, dan perbarui penghitung { var new_ip = new Ip({ ip: Public_ip, count: 1 }); db.collection('ip').save(new_ip);//tambahkan ip baru ke database count.update(//update hit counter { id: "hit counter"}, { $inc: {count: 1} }) } else//update ip counter tertentu, untuk melihat siapa yang paling banyak mengunjungi { ipc.update({ ip: Public_ip }, { $inc: {hitung: 1} }) } }); }

Ini menciptakan skema hitungan, dan fungsi.getCount kami. Fungsi.getCount memeriksa DB untuk ip pengguna dan jika ditemukan, fungsi menambah jumlah pengguna itu, bukan penghitung hit. Namun jika ip pengguna tidak ditemukan, itu akan membuat objek koleksi baru dengan ip pengguna dan menambah hit counter sebesar 1.

Ini kemudian dikembalikan dan ditampilkan ke halaman web.

Di sana Anda memilikinya penghitung hit pelacakan ip.

Langkah 6: Blog

Saat ini saya mencoba mengembangkan blog yang terpusat pada minat saya tentang perangkat lunak, rumah pintar, dan Polaroid. Jadi saya membuat bagian blog. Blog menggunakan halaman html statis dan kerangka setang. Setelah mencari teknologi yang lebih baik untuk membuat blogging lebih mudah, saya mendesain ulang situs web saya menggunakan hugo. Hugo adalah generator html statis. Saya berbicara lebih banyak tentang ini dalam tutorial yang disebutkan di bawah ini.

Langkah 7: Selesai

Itu dia tutorial mendalam di situs web node.js saya yang dihosting secara lokal di raspberry pi saya. Jika Anda memiliki pertanyaan atau komentar, silakan tinggalkan di bawah.

Saya harap ini membantu orang lain di luar sana.

Untuk pendekatan berbeda ke situs ini menggunakan hugo, generator halaman web statis lihat tutorial saya yang lain (segera hadir).