Fork me on GitHub

ساخت صفحه لاگین با ExpressJs + pug

خیلی تخصصی و حرفه ای نیست . چند مورد کوچیک و جالب رو دیدم و گفتم به اشتراک بزارم .
آخر همین پست به صفحه github من برید و پروژه رو از اونجا دریافت کنین .
با دوتا جستجو معمولی به همه این چیزایی که مینویسم میرسید .
میخوام یک صفحه لاگین و یک صفحه خوشامد در صورت لاگین موفقیت آمیز با داده های استاتیک ، داخل express Js و موتور قالب قدرمتند و جذاب pug بنویسیم .
اول از همه ترمینال رو باز کنین و دستور زیر رو بزنید تا express generator رو نصب کنیم .

npm install express-generator -g

حالا باید برنامه رو ایجاد کنیم

cd /var/www/html
mkdir expressLogin
cd expressLogin
npm init

چند تا سوال میپرسه و جواب بدید و در آخر yes .
حالا express رو ایجاد کنیم .

express --view=pug expressLogin

این دستور عالیه . براتون روتر و ویو یک سری چیز های باحال رو میسازه و میریم جلو.
حالا بریم داخل bin/www و فایل رو ویرایش کنین .
پورت 3000 رو میتونین اینجا تغییر بدید به 8080 یا هر چیز دیگه .
حالا بریم bootstrap رو نصب کنیم روی pug .
فایل view/layout.pug رو باز کنین و به این شکل تغییر بدید .
```
doctype html
html
head
title= title
link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css')
link(rel='stylesheet', href='../stylesheets/style.css')
body
block content

script(src='https://code.jquery.com/jquery-3.3.1.slim.min.js')
script(src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js')
script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js')
```
حالا بریم صفحه لاگین و صفحه خوشامد رو بسازیم

برای اینکه استایلمون کامل بشه ، به public/stylesheets/style.css برید .
کل فایل رو به زیر تغییر بدید .
```
html,
body {
height: 100%;
}

body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}

.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

حالا صفحه view/index.pug رو باز کنین و به زیر تغییر بدید .

extends layout

block content
div.text-center
form(class="form-signin" method="POST" action="/users/login")
#error
if error
p.text-danger Error!!!

        - var h1Classes = ['h3', 'mb-3', 'font-weight-normal']
        h1
(class=h1Classes) Please sign in

       
//-input email
        label
( for="inputEmail" class="sr-only") Email address
        input
(type="email" name="username" id="inputEmail" class="form-control" placeholder="Email address" required autofocus)

       
//-input password
        label
(for="inputPassword" class="sr-only") Password
        input
(type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required)

       
//-remember Checkbox
       
- var divClasses=['checkbox', 'mb-3'];
        div
(class=divClasses)
            label
                input
(type="checkbox" value="remember-me")
                span
Remember me

       
//-signIn button
       
- var buttonClass=['btn', 'btn-lg', 'btn-primary', 'btn-block'];
        button
(class=buttonClass type="submit") Sign in

       
- var pClasses=['mt-5', 'mb-3', 'text-muted'];
        p
(class=pClasses) © 2017-2018


حالا یک فایل ایجاد کنید داخل view به اسم users.pug با محتوای زیر

extends layout

block content
div.text-center
div(class="form-signin")
div.text-center
p wellCome Dear #{username}!

حالا بریم روتر ها و درخواست ها رو درست کنیم
برید داخل app.js تا میدلور اضافه کنیم تا درخواست ها رو بتونیم پارس کنیم . زیر var app .... کد زیر رو وارد کنین :

//parse requests
app.use(bodyParser.urlencoded({ extended: true }));

و بالای همین فایل بالای cookieParser کد زیر رو جایگزین کنید :

var bodyParser = require('body-parser');

خوب حالا بریم داخل routes/index.jsو کد زیر رو جایگزین کنین :

/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { error: false });
});

اینجا متغیر error رو false گذاشتیم .
حالا شما میتونین سرور رو اجرا کنین . و روی پورت 8080 (یا اگر تغییر ندادین ، روی 3000) ببینید . برای این کار دستور زیر رو بزنید :

npm run start

خوب میبینید که صفحه لاگین بدون خطا دقیقا مشابه نمونه که گذاشتم ایجاد شد .
حالا بریم سراغ ساختن روتر users/login و authorize کردن کاربر با داده های استاتیک .
برید داخل routes/users.js و کد زیر رو به جای محتوای فایل بزارید .

var express = require('express');
var router = express.Router();
var login = require('../controller/authenticate/login');

/* GET users listing. */
router.get('/', function (req, res, next) {
res.send('respond with a resource');
});

/* Login user */
router.post('/login', function (req, res, next) {

const username = req.body.username;
let loginResult
= login(username, req.body.password);

if (loginResult) {
    res
.render('users', {username: username});
}
else {
    res
.render('index', {error: true});
}

});

module.exports = router;

اینجا داریم داخل بخش login میگیم اگر خروجی login برابر با true بود ، بریم به صفحه کاربر. در غیر این صورت بریم به index و error رو بزاریم true . خوب همه چیز عالیه جز یک چیز . این که ما متود login رو نساختیم .
پس داخل روت پروژه برید و پوشه controller/authenticate رو بسازید و داخل پوشه authenticate فایل login.js رو با محتوای زیر ایجاد کنین :

var login =function(user,password){

console.log(user,password)
if(user==="admin@admin.com" && password==="admin"){
    return true;
}
else{
    return false;
}

}

module.exports=login;
```
تمومه
حالا اگر نام کاربری رو admin@admin.com وارد کنید با رمز عبور admin ، وارد صفحه users میشید و در غیر این صورت یک خطا بالای صفحه لاگین میاد .
میخواستم یک سری نکته ریز رو توی پروژه بگم . کار حرفه ای نیست .
ارادت

چرا Node.js خیلی سریع است؟

پلتفرم Node.js امروزه بعد از سالها جای خود را در میان توسعه دهنده‌ها و شرکت‌ها باز کرده است، بطور عمده امروزه Node.js در مواردی استفاده می‌شود که نیاز است به حجم زیادی از درخواستها در زمان کم پاسخ داده شود. شرکتهایی که از Node.js در زیرساخت‌های خویش استفاده می‌کنند در زیر آمده اند.

وجود ویژگی‌هایی در Node.js و موتور V8 باعث شده که ند پلتفرمی بسیار سریع در سناریوهایی باشد که نیاز به پردازش سریع تعداد زیادی درخواست دارند. در این مقاله به دلایل سریع بودن ند و به طور مشخص به مفهوم «زمان پاسخگویی» می‌پردازیم.

گاهشماری جلالی

بیشتر نرم افزار هایی که فارسی هستند، نیاز دارند تا زمان را به تاریخ ایران نشان دهند. برای این کار چندین ابزار و کتابخانه به زبان های گوناگون نوشته شده است. سال گذشته، زمانی که روی یک نرم افزار کار می کردم، خیلی به دنبال یک کتابخانه ی تاریخ گشتم ولی هیچ کدام نیاز هایم را براورده نکرد. بیشتر آن ها الگوریتم نادرستی داشتند. برخی تنها در یک بازه ی زمانی کوتاه که کمتر از ۱۰۰ سال بود کار می کردند. برخی مشکل پروانه (License) داشتند. سرانجام تصمیم گرفتم خودم دست به کار شوم و گاهشماری جلالی را ساختم.

کاربرد koa برای نوشتن وب سرور ها با آزانگر (Generator) در جاوا اسکریپت - بخش چهار

پیش از خواندن این نوشته، بخش یکم، بخش دوم و بخش سوم آن را بخوانید.

در بخش پیش با co و thunkify آشنا شدیم و دیدیم که چگونه با به کار گیری آزانگر در کنترل روند به ما کمک می کنند. در این جا با ابزاری به نام koa آشنا می شویم که برای نوشتن وب سرور ها با به کار گیری آزانگر ها به کار می رود و می تواند جایگزینی برای ابزار پر کاربرد express باشد.

کاربرد co و thunkify برای کنترل روند با آزانگر (Generator) در جاوا اسکریپت - بخش سه

پیش از خواندن این نوشته، بخش یکم و بخش دوم آن را بخوانید.

در بخش پیش دیدیم که چگونه می توانیم اجرای تابع آزانگر را کنترل کنیم. تابعی به نام run نوشتیم که می توانست تابع های آزانگر را اجرا کند. می توانستیم آن را توسعه دهیم ولی چندین کتابخانه ی دیگر از پیش نوشته شده اند که کاری همانند آن انجام می دهند. یکی از آن ها کتابخانه ای به نام co است که در اینجا با آن و یک کتابخانه ی دیگر به نام thunkify آشنا می شویم.

کاربرد آزانگر (Generator) در جاوا اسکریپت برای کنترل روند اجرا - بخش دو

پیش از خواندن این نوشته، بخش نخست آن را بخوانید.

همان گونه که در بخش نخست دیدید، آزانگر ها به شما توانایی نگه داشتن اجرای تابع و سپس ادامه ی آن را می دهند. در اینجا می کوشم تا چگونگی کاربرد آن ها برای کنترل روند اجرای برنامه را نشان دهم.

استفاده از تمام ظرفیت CPU با Clustering

معماری Nodejs به صورت Single-Threaded است، یعنی تک-رشته ای. اگر بخواهیم این رشته یا همان Thread) را مختصرا تعریف کنیم، میتوان گفت Thread به بخشی از یک Process گفته میشود که به منابع آن Process دسترسی دارد. ضمنا هر Process میتواند Thread های مختلفی داشته باشد. اما همانطور که گفتیم ما در Nodejs تنها یک Thread داریم که مسئول اجرای برنامه نوشته شده با Nodejs می‌باشد. این تک-رشته‌ای بودن در Nodejs محاسن بسیاری دارد که در این مقاله به آنها نمیپردازیم و به جای آن تلاش میکنیم به این سوال مهم پاسخ دهیم که: اگر CPU سرور ما چندین هسته داشته باشد، تک-رشته ای بودن Nodejs باعث میشود تنها از یک هسته ی آن استفاده شود! پس راه حل چیست؟

خیار!

خیار برای سلامتی شما مفید است.

خیار برای سلامتی نرم افزار های شما هم مفید است!

سپاسگذار خواهم شد اگر دیدگاه های خود را در اینجا یا در Vimeo بنویسید.

برنامه نویسی Event-Driven با استفاده از توابع Callback

برنامه نویسی Event-Driven به سبک خاصی از برنامه نویسی می‌گویند که در آن جریان اجرای برنامه توسط Eventها تعیین می‌شود. در هنگام تعریف هر Event برنامه نویس موظف است برای آن Event یک Event-Handler یا Event-Callback نیز تعریف کند تا در هنگام اتفاق افتادن آن Event صدا زده شوند و وظیفه خود را انجام دهد. در مقاله‌ی فوق این مباحث را با مثال‌هایی از دنیای واقعی و همچنین کدهای برنامه نویسی توضیح می‌دهیم.

ساخت یک برنامه Realtime با NowJS

NowJS یک ماژول Nodejs است که برای ساخت برنامه های بلادرنگ یا Realtime استفاده می‌شود. نحوه کار این ماژول در سه مرحله زیر خلاصه می ‌شود:

  • این ماژول یک namespace به نام now ایجاد می کند که هم در سمت client و هم در سمت server در دسترس است.
  • توابع و متغیرهایی که به این namespace اضافه می‌شوند بین سرور و کلاینت sync می‌شوند.
  • در این حالت سرور می‌تواند توابع تعریف شده در سمت کلاینت را صدا بزند و همچنین کلاینت می‌تواند توابع مربوط به سرور را اجرا کند.

به عنوان مثال دو اسکریپت زیر را در نظر بگیرید. اسکریپت اول در سمت سرور:

// On server

var nowjs      = require('now');
var httpServer = require('http').createServer();
var everyone   = nowjs.initialize(httpServer);

var serverInfo = {
  db
: 'mongodb',
  version
: '0.2.2'
}

everyone
.now.getServerInfo = function(callback) {
  callback
(serverInfo);
}

httpServer
.listen(3000);

و دیگری در سمت کلاینت:

// On client

<script>
  now
.getServerInfo(function(data){
    console
.log(data.version);
 
});
</script>

با اجرای این برنامه، مرورگر ورژن 0.2.2 را بر روی console چاپ می کند!

معرفی forever

فرض کنید برنامه ای با node نوشته‌اید و آن را به سرور خود منتقل کرده و از طریق ssh با دستور node myscript.js آن را اجرا کرده‌اید. بعد از چند دقیقه برنامه شما از کار می‌افتد در صورتی که مطمئن هستید خطایی در آن نیست. این مشکل اول!

وقتی که به زبان PHP یا Ruby یا زبان‌هایی از این دست برنامه‌ای می نویسیم، برای اجرای آن از وب سرورهایی نظیر apache یا nginx استفاده می کنیم: با هر درخواست، وب سرور اسکریپت برنامه را اجرا می کند و پاسخ را به کاربر می فرستد. اما در node برنامه ها مستقل عمل می کنند. به عنوان مثال وقتی در node از ماژول http استفاده می کنیم هیچ نیازی به وب سرور نداریم. حال فرض کنید برنامه در حال پاسخ به یک درخواست به خطای شکار نشده ( یعنی همون catch نشده :دی ) برخورد کند.

در حالتی که از وب سرورها برای اجرای اسکریپتها استفاده می‌شود ( مثل PHP ) تنها کاربری که با خطا مواجه می‌شود آن کسی است که درخواست را ارسال نموده و دیگر کاربران چون به این حالت خطا نرسیده اند بدون مشکل با برنامه در تعامل خواهند بود. اما در حالتی که از node استفاده کنیم بروز یک خطای catch نشده کل process را از کار می اندازد و به عبارتی برنامه crash می کند. بنابراین تا زمانی که برنامه دوباره راه اندازی نشود کسی قادر به استفاده از آن نیست. این هم مشکل دوم!

عیب‌یابی برنامه‌های node.js

گاهی اوقات زمانی که صرف عیب‌یابی یا debug کردن برنامه‌ها می‌شه از زمانی که صرف تولیدشون می‌شه بیشتره. از این رو همیشه برنامه‌نویس‌ها به فکر تولید ابزارها و استفاده از روش‌هایی هستند که کار عیب‌یابی رو تسهیل و تسریع کنه.

node.js هم از این قاعده مستثنی نیست و اگر ‌می‌خواهید زمان کمتری رو صرف عیب‌یابی برنامه‌هاتون بکنید باید از روش‌ها و ابزارهای مناسب استفاده کنید که در ادامه به بررسی اونها می‌پردازیم.

یک لاگ سرور ساده با nodejs، express و mongodb

در این مقاله کوچک قصد دارم یک نمونه کد و نحوه کار با چند ماژول بسیار پر کاربرد نود جی‌اس را آموزش بدهم.

این کد یک برنامه کوچک برای ثبت log (خطا، اخطار و اطلاع‌رسانی) است.

مزیت این log server در نوع ثبت و نگهداری اطلاعات logها می‌باشد که در آن از یک نوع بانک‌ اطلاعاتی غیر رابطه‌ای (Document oriented) استفاده شده است.

استفاده از nodejs در ویندوز

نصب و راه اندازی nodejs بر روی سیستم عامل ویندوز بسیار ساده است. در نسخه های بالاتر از ورژن 0.6.3، installer برنامه npm رو هم به طور خودکار برای شما نصب می کنه.

می تونید آخرین نسخه ند رو از آدرس http://nodejs.org/dist/latest دریافت کنید. دو نسخه برای ویندوز آماده شده. یکی فایل اجرایی و یکی فایل msi.

فایل installer یا همون msi رو دانلود و اجرا کنید. این نصاب سه کار انجام میده. اول برنامه ند رو داخل یک پوشه کپی می کنه. بعد npm رو هم نصب می کنه. و در آخر آدرس ند رو در متغیر محیطی PATH قرار می ده تا بتونید از node در command prompt استفاده کنید. به همین دلیل نیاز دارید تا یک بار سیستم رو reboot کنید.

فیلم آشنایی با Node.js

در واحد «مدرن» در شرکت «توسن» هر هفته یک نفر یک موضوع را به دیگران آموزش می‌دهد. چند هفته پیش نوبت من بود و موضوع ارائه من هم Node.js بود. فیلم این ارائه در Vimeo گذاشته شده است. برای دیدن این فیلم به نشانی زیر بروید: http://vimeo.com/29084752

اسلایدهای این ارائه هم در نشانی زیر در GitHub در دسترس هستند: http://behrang.github.com/presentations/node.js/2011-09-07/

اگر در Vimeo حساب کاربری داشته باشید، می‌توانید فیلم را دریافت کنید. حجم فیلم کم شده تا دریافت آن ساده‌تر باشد.

در این ارائه، نخست Node.js معرفی می‌شود و سپس برنامه نویسی بدون Thread و همچنین Non-blocking توضیح داده می‌شود. سپس چند نمونه کد نوشته می‌شود. پس از آن هم چند کتابخانه مهم در Node.js معرفی می‌شوند که شامل NPM، Connect و Express می‌شود. در پایان هم کمی درباره Parallel Programming و به کار گیری پردازنده‌های چند هسته‌ای در برنامه‌های Node.js توضیح داده می‌شود.

برای دیدن فیلم‌های دیگر ارائه شده در «توسن» می‌توانید به کانال Tosan Tech Talk در Vimeo به نشانی زیر بروید: http://vimeo.com/channels/ttt

معرفی و نصب NPM

npm برای مدیریت پکیج های nodejs استفاده میشه. اکثر ماژول هایی که برای ند نوشته می شوند برای سهولت استفاده در npm ثبت می شوند و می تونید با استفاده از یک دستور ساده این ماژول ها رو به پروژه های خودتون اضافه کنید و به عبارت دیگه وابستگی های پروژه های خودتون رو مدیریت کنید. طریقه نصب و کار با npm در ادامه مطلب شرح داده شده.

شیء گرایی در جاوا اسکریپت

شاید برای خیلی ها عجیب باشد که در مورد شیء گرایی با جاوا اسکریپت متنی بخوانند. واقعیت این است که جاوا اسکریپت ساختارهای شیء گرایی با قابلیتهای بسیار بالایی دارد اما به دلیل تفاوت این شیء گرایی با شیء گرایی های معمول در زبان های شبه C، این ساختارها برای برنامه نویسانی که از ابتدا با Java، C و ... کار کرده اند کمی عجیب است.

همه از فواید شیء گرایی و ماهیت آن اطلاع داریم بنابراین از شرح شیء گرایی می گذریم. در اینجا می خواهیم با نوع خاصی از شیء گرایی آشنا شویم که به عنوان prototyping شناخته می شود.

سلام جهان!

با نام او

افتخار دارم اولین پست بلاگ ند را به شما عزیزان تقدیم کنم. در این اولین پست دوست دارم در مورد چرایی تشکیل گروه کاربری ند فارسی توضیحاتی بدم و در خلال این توضیحات، در مورد ند هم بیشتر با شما صحبت کنم.