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 میشید و در غیر این صورت یک خطا بالای صفحه لاگین میاد .
میخواستم یک سری نکته ریز رو توی پروژه بگم . کار حرفه ای نیست .
ارادت

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

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

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

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

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

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

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

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

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

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

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

خیار!

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

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

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

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

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

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

استفاده از 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 در ادامه مطلب شرح داده شده.

سلام جهان!

با نام او

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