سرور مجازی

ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

۶ مرداد۹۹

رمزهای عبور معمولاً برای تأیید اعتبار کاربر در بیشتر برنامه های وب استفاده می شوند. به همین دلیل لازم است که گذرواژه‌ها به روشی ایمن ذخیره شوند. در طول سالها ، از تکنیک هایی مانند هش کردن (در هم سازی) رمز عبور یک طرفه استفاده شده است تا نمایش واقعی رمزهای ذخیره شده در یک پایگاه داده را مخفی کند. اما اگرچه درهم سازی گذرواژه قدم بزرگی در جهت ایمن سازی رمز عبور است ، کاربر هنوز هم یک مشکل بزرگ برای امنیت رمز عبور دارد. کاربرانی که از کلمه رایجی به عنوان رمز عبور استفاده می کنند ، عمل hashing را بی فایده می کنند، زیرا یک حمله brute-force می تواند به سرعت چنین رمزهایی را خراب کند.
برای پرداختن به این موضوع ، بسیاری از برنامه های وب امروز اصرار دارند که کاربران از گذرواژه های قوی برخوردار باشند ، و یا با حداقل طول رمز عبور و یا ترکیبی از کاراکترها و نمادهای الفبا در رمز عبور این کار را انجام میدهند. برای اندازه‌گیری قدرت رمز عبور ، Dropbox الگوریتمی برای تخمین قدرت واقعی رمز عبور با الهام از crackerهای رمز عبور ایجاد کرده است. این الگوریتم در یک کتابخانه جاوا اسکریپت به نام zxcvbn بسته بندی شده است. علاوه بر این ، این بسته شامل فرهنگ لغت کلمات متداول انگلیسی ، نام ها و کلمات عبور است.
در این آموزش با استفاده از چارچوب جاوااسکریپت React یک فرم با فیلدهایی برای نام کامل ، ایمیل و رمز عبور ایجاد خواهیم کرد. اندکی اعتبارسنجی سبک برای فرم انجام خواهیم داد و همچنین از کتابخانه zxcvbn برای برآورد قدرت پسورد در فرم استفاده می کنیم و ضمنا بازخورد بصری را ارائه میکنیم.
این نسخه نمایشی CodeSandbox از آنچه تا پایان این آموزش ایجاد خواهیم کرد را بررسی کنید.
پیش نیازها
قبل از شروع کار ، اطمینان حاصل کنید که نسخه جدیدی از Node را روی سیستم خود نصب کرده باشید. ما از yarn برای اجرای تمام اسکریپت های NPM و نصب متعلقات برای پروژه خود استفاده خواهیم کرد ، بنابراین همچنین از نصب yarn اطمینان حاصل کنید. برای نصب yarn روی سیستم می توانید از این راهنمای نصب yarn استفاده کنید. همچنین ، برای تولید برنامه جدید React خود ، از بسته محبوب create-react-app استفاده خواهیم کرد.
اگر قبلاً آن را نصب نکرده اید ، دستور زیر را اجرا کنید تا برنامه create-react-app را در سیستم خود نصب کنید.
npm install -g create-react-app

مرحله 1 – تنظیم برنامه خود
یک برنامه جدید React را با استفاده از دستور زیر شروع کنید. می توانید برنامه را هر طور که می خواهید نامگذاری کنید.
توجه: اگر از npm نسخه 5.2 یا بالاتر استفاده می کنید ، با یک باینری npx اضافی همراه است. با استفاده از باینری npx ، دیگر نیازی نیست که برنامه create-react-app را در سطح جهانی روی سیستم خود نصب کنید. با استفاده از این دستور می توانید برنامه جدید React را شروع کنید: npx create-react-app react-password-strength

در مرحله بعد ، متعلقات مورد نیاز برنامه خود را نصب خواهیم کرد. برای نصب متعلقات لازم ، دستور زیر را اجرا کنید.
$ yarn add bootstrap zxcvbn isemail prop-types

$ yarn add -D npm-run-all node-sass-chokidar

ما node-sass-chokida را به عنوان یک وابستگی توسعه برای برنامه خود نصب کرده ایم تا ما را قادر به استفاده از SASS کند. برای اطلاعات بیشتر در مورد این ، به این راهنما مراجعه کنید.
اکنون دیرکتوری src را باز کرده و پسوند فایل همه فایل های .css را به .scss تغییر دهید. فایل های .css مورد نیاز در ادامه کار توسط node-sass-chokidar کامپایل می شوند.
فایل pack.json را ویرایش کرده و بخش scripts را تغییر دهید تا به شکل زیر باشد:
“scripts”: {
“start:js”: “react-scripts start”,
“build:js”: “react-scripts build”,
“start”: “npm-run-all -p watch:css start:js”,
“build”: “npm-run-all build:css build:js”,
“test”: “react-scripts test –env=jsdom”,
“eject”: “react-scripts eject”,
“build:css”: “node-sass-chokidar –include-path ./src –include-path ./node_modules src/ -o src/”,
“watch:css”: “npm run build:css && node-sass-chokidar –include-path ./src –include-path ./node_modules src/ -o src/ –watch –recursive”
}

همانطور که ممکن است متوجه شده باشید ، ما بسته bootstrap را به عنوان یک وابستگی برای برنامه خود نصب کرده ایم تا یک ظاهر طراحی پیش فرض را بدست آوریم. برای وارد کردن Bootstrap در برنامه ، فایل src / index.js را ویرایش کنید و قبل از هر عبارت import دیگر خط زیر را اضافه کنید.
import “bootstrap/dist/css/bootstrap.min.css”;

در آخر ، درخواست خود را شروع کنید:
$ yarn start

برنامه اکنون شروع شده است و توسعه می تواند آغاز شود. توجه کنید که یک سربرگ مرورگر با عملکرد لود مجدد زنده برای شما باز شده است تا همزمان با ایجاد برنامه ، با تغییرات در برنامه همگام شوید.
در این مرحله ، نمای برنامه شما مانند تصویر زیر خواهد بود:

مرحله 2 – ساختن مولفه ها
به یاد داشته باشید که قصد داریم یک فرم با فیلدهای مربوط به نام کامل ، ایمیل و رمز عبور ایجاد کنیم و همچنین برخی از اعتبار سنجی های سبک را در این فیلدها انجام دهیم. مولفه های React زیر را ایجاد می کنیم:
FormField – یک فیلد ورودی فرم را با ویژگی های آن پوشش میدهد و کنترل کننده رویداد را تغییر میدهد.
EmailField – ایمیل FormField را دربرگرفته و منطق اعتبار سنجی ایمیل را به آن اضافه می کند.
PasswordField – رمز عبور FormField را محصور کرده و منطق اعتبار رمز عبور را به آن اضافه می کند. همچنین مقیاس قدرت رمز عبور و برخی از نشانه های بصری دیگر را به فیلد وصل می کند.
JoinForm – تیم حمایت عضویت که فیلدهای فرم را در خود جای میدهد.
پیش بروید و یک دیرکتوری components در داخل فهرست src برنامه ایجاد کنید تا تمام اجزای ما در آن قرار بگیرند.
مؤلفه FormField
یک فایل جدید FormField.js را در دیرکتوری src / parts ایجاد کنید و قطعه کد زیر را به آن اضافه کنید:
import React, { Component, Fragment } from ‘react’;
import PropTypes from ‘prop-types’;

class FormField extends Component {

// initialize state
state = { value: ”, dirty: false, errors: [] }

hasChanged = e => {
e.preventDefault();

// destructure props – assign default dummy functions to validator and onStateChanged props
const { label, required = false, validator = f => f, onStateChanged = f => f } = this.props;

const value = e.target.value;
const isEmpty = value.length === 0;
const requiredMissing = this.state.dirty && required && isEmpty;

let errors = [];

if (requiredMissing) {
// if required and is empty, add required error to state
errors = [ …errors, `${label} is required` ];
} else if (‘function’ === typeof validator) {
try {
validator(value);
} catch (e) {
// if validator throws error, add validation error to state
errors = [ …errors, e.message ];
}
}

// update state and call the onStateChanged callback fn after the update
// dirty is only changed to true and remains true on and after the first state update
this.setState(({ dirty = false }) => ({ value, errors, dirty: !dirty || dirty }), () => onStateChanged(this.state));
}

render() {
const { value, dirty, errors } = this.state;
const { type, label, fieldId, placeholder, children } = this.props;

const hasErrors = errors.length > 0;
const controlClass = [‘form-control’, dirty ? hasErrors ? ‘is-invalid’ : ‘is-valid’ : ” ].join(‘ ‘).trim();

return (
<Fragment>
<div className=”form-group px-3 pb-2″>
<div className=”d-flex flex-row justify-content-between align-items-center”>
<label htmlFor={fieldId} className=”control-label”>{label}</label>
{/** Render the first error if there are any errors **/}
{ hasErrors && <div className=”error form-hint font-weight-bold text-right m-0 mb-2″>{ errors[0] }</div> }
</div>
{/_ Render the children nodes passed to component _/}
{children}
<input type={type} className={controlClass} id={fieldId} placeholder={placeholder} value={value} onChange={this.hasChanged} />
</div>
</Fragment>
);
}

}

FormField.propTypes = {
type: PropTypes.oneOf([“text”, “password”]).isRequired,
label: PropTypes.string.isRequired,
fieldId: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
required: PropTypes.bool,
children: PropTypes.node,
validator: PropTypes.func,
onStateChanged: PropTypes.func
};

export default FormField;

در این بخش اندک مواردی روی این مولفه انجام می دهیم. بیایید سعی کنیم کمی آن را تجزیه کنیم:
Input State: ابتدا حالت را برای مؤلفه فیلد فرم تنظیم می کنیم تا مقدار فعلی فیلد ورودی ، وضعیت dirty این فیلد و هرگونه خطای اعتبار سنجی موجود را ردیابی کنیم. هنگامی که مقدار یک فیلد برای اولین بار تغییر کند و dirty (کثیف) باقی بماند ، تبدیل به یک فیلد dirty می شود.
Handle Input Change: سپس کنترلر رویداد hasChanged (e) را اضافه کردیم تا مقدار حالت را به مقدار ورودی فعلی در هر تغییر در ورودی به روز کند. در هندلر وضعیت کثیف فیلد را نیز برطرف می کنیم. بررسی می کنیم که آیا این فیلد یک فیلد مورد نیاز بر اساس مشخصه ها است یا خیر ، و اگر مقدار خالی باشد ، یک خطای اعتبارسنجی به آرایه خطاهای حالت اضافه می کنیم.
اما ، اگر این فیلد یک فیلد لازم نیست یا لازم است اما خالی نیست ، به سراغ عملکرد اعتبارسنجی منتقل شده در مشخصه اعتبارسنجی اختیاری میرویم، آن را با مقدار ورودی فعلی فراخوانی می کنیم و خطای اعتبار سنجی حاصل را به آرایه خطاهای حالت اضافه می کنیم. (در صورت بروز هرگونه خطا).
در آخر ، وضعیت را به روز می کنیم و یک تابع callbackفراخوانی میکنیم که پس از بروزرسانی فراخوانی می شود. تابع callback ، تابع منتقل شده در مشخصه اختیاری onStateChanged را فراخوانی می کند ، و حالت جدید را به عنوان آرگومان خود وارد می کند. این امر برای انتشار تغییرات حالت در خارج از مؤلفه مفید خواهد بود.
Rendering and Props در اینجا فیلد ورودی و برچسب آن را ارائه می دهیم. همچنین به طور مشروط اولین خطای موجود در آرایه خطاهای حالت (در صورت بروز هر گونه خطا) را ارائه می دهیم. توجه کنید که چگونه کلاس ها را برای قسمت ورودی به صورت پویا تنظیم کرده ایم تا با استفاده از کلاس های داخلی Bootstrap ، وضعیت اعتبار سنجی را نشان دهند. همچنین گره های کودک موجود در این مولفه را ارائه می دهیم.
همانطور که در propType های مؤلفه مشاهده می شود ، مشخصه های لازم برای این مؤلفه عبارتند از: type (“text” یا “password “) ، label ، placeholder و field. مولفه های باقیمانده اختیاری هستند.
مؤلفه EmailField
یک فایل جدید EmailField.js را در دیرکتوری src / parts ایجاد کنید و قطعه کد زیر را به آن اضافه کنید.
import React from ‘react’;
import PropTypes from ‘prop-types’;
import { validate } from ‘isemail’;

import FormField from ‘./FormField’;

const EmailField = props => {

// prevent passing type and validator props from this component to the rendered form field component
const { type, validator, …restProps } = props;

// validateEmail function using the validate() method of the isemail package
const validateEmail = value => {
if (!validate(value)) throw new Error(‘Email is invalid’);
};

// pass the validateEmail to the validator prop
return <FormField type=”text” validator={validateEmail} {…restProps} />
};

EmailField.propTypes = {
label: PropTypes.string.isRequired,
fieldId: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
required: PropTypes.bool,
children: PropTypes.node,
onStateChanged: PropTypes.func
};

export default EmailField;

در مؤلفه EmailField ، به سادگی یک مؤلفه FormField را ارائه می دهیم و یک عملکرد اعتبارسنجی ایمیل را به مشخصه اعتبارسنجی منتقل می کنیم. برای اعتبار سنجی ایمیل از روش validate() بسته isemail استفاده می کنیم.
همچنین توجه داشته باشید که تمام مشخصه های دیگر به غیر از type و validator از مؤلفه EmailField به مؤلفه FormField منتقل می شوند.
مؤلفه PasswordField
یک فایل جدید PasswordField.js را در دیرکتوری src / parts ایجاد کنید و قطعه کد زیر را به آن اضافه کنید:
import React, { Component, Fragment } from ‘react’;
import PropTypes from ‘prop-types’;
import zxcvbn from ‘zxcvbn’;

import FormField from ‘./FormField’;

class PasswordField extends Component {

constructor(props) {

super(props);
const { minStrength = 3, thresholdLength = 7 } = props;

// set default minStrength to 3 if not a number or not specified
// minStrength must be a a number between 0 – 4

this.minStrength = typeof minStrength === ‘number’
? Math.max( Math.min(minStrength, 4), 0 )
: 3;

// set default thresholdLength to 7 if not a number or not specified
// thresholdLength must be a minimum value of 7

this.thresholdLength = typeof thresholdLength === ‘number’
? Math.max(thresholdLength, 7)
: 7;

// initialize internal component state
this.state = { password: ”, strength: 0 };
}

stateChanged = state => {

// update the internal state using the updated state from the form field

this.setState({
password: state.value,
strength: zxcvbn(state.value).score
}, () => this.props.onStateChanged(state));

};

validatePasswordStrong = value => {
// ensure password is long enough
if (value.length <= this.thresholdLength) throw new Error(“Password is short”);

// ensure password is strong enough using the zxcvbn library
if (zxcvbn(value).score < this.minStrength) throw new Error(“Password is weak”);
};

render() {
const { type, validator, onStateChanged, children, …restProps } = this.props;
const { password, strength } = this.state;

const passwordLength = password.length;
const passwordStrong = strength >= this.minStrength;
const passwordLong = passwordLength > this.thresholdLength;

// dynamically set the password length counter class
const counterClass = [‘badge badge-pill’, passwordLong ? passwordStrong ? ‘badge-success’ : ‘badge-warning’ : ‘badge-danger’].join(‘ ‘).trim();

// password strength meter is only visible when password is not empty
const strengthClass = [‘strength-meter mt-2’, passwordLength > 0 ? ‘visible’ : ‘invisible’].join(‘ ‘).trim();

return (
<Fragment>
<div className=”position-relative”>
{/** Pass the validation and stateChanged functions as props to the form field **/}
<FormField type=”password” validator={this.validatePasswordStrong} onStateChanged={this.stateChanged} {…restProps}>
<span className=”d-block form-hint”>To conform with our Strong Password policy, you are required to use a sufficiently strong password. Password must be more than 7 characters.</span>
{children}
{/** Render the password strength meter **/}
<div className={strengthClass}>
<div className=”strength-meter-fill” data-strength={strength}></div>
</div>
</FormField>
<div className=”position-absolute password-count mx-3″>
{/** Render the password length counter indicator **/}
<span className={counterClass}>{ passwordLength ? passwordLong ? `${this.thresholdLength}+` : passwordLength : ” }</span>
</div>
</div>
</Fragment>
);
}

}

PasswordField.propTypes = {
label: PropTypes.string.isRequired,
fieldId: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
required: PropTypes.bool,
children: PropTypes.node,
onStateChanged: PropTypes.func,
minStrength: PropTypes.number,
thresholdLength: PropTypes.number
};

export default PasswordField;

ما در این مؤلفه از بسته تخمین قدرت رمز عبور zxcvbn در جاوااسکریپت استفاده می کنیم. این بسته یک تابعzxcvbn () را صادر می کند که یک (کلمه عبور: رشته) را به عنوان اولین آرگومان خود در نظر می گیرد و یک شیء را با چندین ویژگی برای برآورد قدرت پسورد باز می گرداند. در این آموزش ، ما فقط به ویژگی امتیاز میپردازیم ، که عدد صحیحی بین 0 – 4 است (برای اجرای نوار قدرت مفید است).
در اینجا به تفصیل آنچه در مؤلفه PasswordField در جریان است ، می پردازیم.
Initialization – در constructor() ، ما دو ویژگی نمونه ایجاد کردیم: thresholdLangth و minStrength از قسمت مربوطه که به مؤلفه منتقل شده اند. thresholdLength (طول آستانه) حداکثر طول رمز عبور است قبل از آنکه به طرز قابل توجهی طولانی در نظر گرفته شود. پیش فرض 7 است و نمی تواند پایین تر باشد. minStrength حداقل نمره zxcvbn است قبل از اینکه رمز عبور به اندازه کافی قوی در نظر گرفته می شود. مقدار آن از 0-4 متغیر است. اگر به درستی مشخص نشده باشد ، پیش فرض 3 قرار میگیرد.
همچنین برای ذخیره رمز عبور فعلی و قدرت رمز عبور ، حالت داخلی فیلد رمز عبور را مقداردهی اولیه کردیم.
Handling Password Changes – یک تابع اعتبار سنجی گذرواژه تعریف کردیم که به مشخصه اعتبارسنجی مؤلفه FormField منتقل می شود. این تابع تضمین می کند که طول رمز عبور طولانی تر از طول آستانه است و همچنین دارای یک نمره حداقل zxcvbn () از minStrength مشخص شده است.
همچنین یک تابع stateChanged () تعریف کردیم ، که به مشخصه onStateChanged از مؤلفه FormField منتقل خواهد شد. این عملکرد حالت به روز شده از مؤلفه FormField را بازیابی می کند و از آن برای محاسبه و به روزرسانی وضعیت داخلی جدید مؤلفه PasswordField استفاده می کند.
یک تابع callback باید بعد از بروزرسانی حالت داخلی فراخوانی شود. تابع callback ، تابع منتقل شده در قسمت اختیاری onStateChanged از مؤلفه PasswordField را فراخوانی می کند و حالت به روز شده FormField را به عنوان آرگومان خود وارد میکند.
Rendering and Props – در اینجا به راحتی عنصر زیربنایی FormField را در کنار بعضی از عناصر برای اشاره ورودی ، سنجش قدرت رمز عبور ، و شمارنده طول رمزعبور ارائه کردیم.
مقیاس رمز عبور، قدرت رمز عبور فعلی را بر اساس حالت نشان می دهد و به گونه ای پیکربندی شده است که اگر طول رمز عبور 0 باشد به صورت پویا قابل مشاهده نباشد. این مقیاس برای سطوح مختلف قدرت رنگ های مختلف را نشان می دهد.
شمارنده طول رمز عبور ، نشان می دهد چه زمان طول پسورد کافی است. اگر رمز عبور از طول آستانه طولانی تر نباشد ، طول رمز عبور را نشان می دهد ، در غیر این صورت طول آستانه را به همراه یک (+) نشان می دهد.
مؤلفه PasswordField دو قسمت اختیاری دیگر را می پذیرد: minStrength و thresholdLength به همان صورت که در propTypes های مؤلفه تعریف شده است.
مولفه JoinForm
یک فایل جدید JoinForm.js را در دیرکتوری src / parts ایجاد کنید و قطعه کد زیر را به آن اضافه کنید:
import React, { Component } from ‘react’;

import FormField from ‘./FormField’;
import EmailField from ‘./EmailField’;
import PasswordField from ‘./PasswordField’;

class JoinForm extends Component {

// initialize state to hold validity of form fields
state = { fullname: false, email: false, password: false }

// higher-order function that returns a state change watch function
// sets the corresponding state property to true if the form field has no errors
fieldStateChanged = field => state => this.setState({ [field]: state.errors.length === 0 });

// state change watch functions for each field
emailChanged = this.fieldStateChanged(’email’);
fullnameChanged = this.fieldStateChanged(‘fullname’);
passwordChanged = this.fieldStateChanged(‘password’);

render() {
const { fullname, email, password } = this.state;
const formValidated = fullname && email && password;

// validation function for the fullname
// ensures that fullname contains at least two names separated with a space
const validateFullname = value => {
const regex = /^[a-z]{2,}(\s[a-z]{2,})+$/i;
if (!regex.test(value)) throw new Error(‘Fullname is invalid’);
};

return (
<div className=”form-container d-table-cell position-relative align-middle”>
<form action=”/” method=”POST” noValidate>

<div className=”d-flex flex-row justify-content-between align-items-center px-3 mb-5″>
<legend className=”form-label mb-0″>Support Team</legend>
{/** Show the form button only if all fields are valid **/}
{ formValidated && <button type=”button” className=”btn btn-primary text-uppercase px-3 py-2″>Join</button> }
</div>

<div className=”py-5 border-gray border-top border-bottom”>
{/** Render the fullname form field passing the name validation fn **/}
<FormField type=”text” fieldId=”fullname” label=”Fullname” placeholder=”Enter Fullname” validator={validateFullname} onStateChanged={this.fullnameChanged} required />

{/** Render the email field component **/}
<EmailField fieldId=”email” label=”Email” placeholder=”Enter Email Address” onStateChanged={this.emailChanged} required />

{/** Render the password field component using thresholdLength of 7 and minStrength of 3 **/}
<PasswordField fieldId=”password” label=”Password” placeholder=”Enter Password” onStateChanged={this.passwordChanged} thresholdLength={7} minStrength={3} required />
</div>

</form>
</div>
);
}

}

export default JoinForm;

مولفه JoinForm اجزای فیلد فرم را دربرمیگیرد که فرم ما را تشکیل می دهد. ما برای حفظ اعتبار سه فیلد فرم ، حالت اولیه را تنظیم کردیم: نام کامل ، ایمیل و رمز عبور. همه آنها در ابتدا false هستند – که نامعتبر است.
همچنین توابع مشاهده تغییر حالت را برای هر فیلد تعریف کردیم تا حالت فرم را بر این اساس آپدیت کند. تابع watch بررسی میکند که در یک فیلد خطایی نباشد و حالت داخلی فرم را برای آن فیلد روی true به روز می کند – که معتبر است. سپس این توابع مشاهده به نظارت بر onStateChanged هر مؤلفه فیلد فرم اختصاص داده می شوند تا تغییرات وضعیت را کنترل کنند.
سرانجام فرم را ارائه دادیم. توجه کنید که ما یک تابع اعتبارسنجی را به فیلد fullname اضافه کرده ایم تا اطمینان حاصل شود که دو نام حداقل با فاصله (space) جدا شده اند و فقط حاوی کاراکترهای الفبا هستند.
مؤلفه App
تا این مرحله ، مرورگر هنوز برنامه React را ارائه می دهد. پیش خواهیم رفت تا فایل App.js را در دیرکتوری src اصلاح کنیم تا JoinForm را در داخل AppComponent ارائه دهیم.
فایل App.js باید مانند قطعه زیر باشد:
import React from ‘react’;
import JoinForm from ‘./components/JoinForm’;
import ‘./App.css’;

const App = () => (
<div className=”main-container d-table position-absolute m-auto”>
<JoinForm />
</div>
);

export default App;

مرحله 3 – طراحی با SASS
یک قدم از ظاهر نهایی برنامه خود فاصله داریم. در حال حاضر ، به نظر می رسد همه چیز کمی خارج از مکان خود قرار دارد. پیش خواهیم رفت تا برخی از قوانین استایل را در فایل src / App.scss تعریف کنیم تا فرم مورد نظر را طراحی کنیم.
فایل App.scss مانند قطعه کد زیر خواهد شد:
/_ Declare some variables _/
$primary: #007bff;

// Password strength meter color for the different levels
$strength-colors: (darkred, orangered, orange, yellowgreen, green);

// Gap width between strength meter bars
$strength-gap: 6px;

body {
font-size: 62.5%;
}

.main-container {
width: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.form-container {
bottom: 100px;
}

legend.form-label {
font-size: 1.5rem;
color: desaturate(darken($primary, 10%), 60%);
}

.control-label {
font-size: 0.8rem;
font-weight: bold;
color: desaturate(darken($primary, 10%), 80%);
}

.form-control {
font-size: 1rem;
}

.form-hint {
font-size: 0.6rem;
line-height: 1.4;
margin: -5px auto 5px;
color: #999;

&.error {
color: #C00;
font-size: 0.8rem;
}
}

button.btn {
letter-spacing: 1px;
font-size: 0.8rem;
font-weight: 600;
}

.password-count {
bottom: 16px;
right: 10px;
font-size: 1rem;
}

.strength-meter {
position: relative;
height: 3px;
background: #DDD;
margin: 7px 0;
border-radius: 2px;

// Dynamically create the gap effect
&:before,
&:after {
content: ”;
height: inherit;
background: transparent;
display: block;
border-color: #FFF;
border-style: solid;
border-width: 0 $strength-gap 0;
position: absolute;
width: calc(20% + #{$strength-gap});
z-index: 10;
}

// Dynamically create the gap effect
&:before {
left: calc(20% – #{($strength-gap / 2)});
}

// Dynamically create the gap effect
&:after {
right: calc(20% – #{($strength-gap / 2)});
}
}

.strength-meter-fill {
background: transparent;
height: inherit;
position: absolute;
width: 0;
border-radius: inherit;
transition: width 0.5s ease-in-out, background 0.25s;

// Dynamically generate strength meter color styles
@for $i from 1 through 5 {
&[data-strength=’#{$i – 1}’] {
width: (20% * $i);
background: nth($strength-colors, $i);
}
}
}

ما موفق شده ایم که سبک های مورد نیاز برنامه خود را اضافه کنیم. به استفاده از محتوای CSS تولید شده در شبه عناصر .strength-meter:before و .strength-meter:after توجه کنید تا گپ هایی به مقیاس قدرت پسورد اضافه کنیم.
همچنین از دستورالعمل @for در Sass استفاده کردیم تا به صورت پویا رنگها را برای اندازه گیری سطوح مختلف قدرت رمز عبور ایجاد کنیم.
صفحه برنامه نهایی مانند این است:

با خطاهای اعتبار سنجی ، صفحه به این شکل ظاهر می شود:

بدون هیچ گونه خطایی ، هنگامی که همه فیلدها معتبر هستند ، صفحه مانند این ظاهر می شود:

نتیجه
در این آموزش ، یک قدرت سنج رمز عبور را بر اساس کتابخانه zxcvbn جاوااسکریپت در برنامه React ایجاد کردیم. برای مطالعه یک راهنمای استفاده دقیق و مستندات کتابخانه zxcvbn ، به منبع zxcvbn در Github مراجعه کنید. برای دریافت نمونه کامل کد این آموزش ، منبع password-strength-react-demo در Github را بررسی کنید. همچنین می توانید یک نسخه آزمایشی زنده از این آموزش در مورد کد Sandbox دریافت کنید.
اگر به نسخه AngularJS این مقاله علاقه مند هستید ، می توانید به این مقاله نگاهی بیندازید: Password Strength Meter in AngularJS.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:brute-force, CodeSandbox, Dropbox, npx, yarn, zxcvbn

۰ نظر

behnam gol mohamadi

ساخت یک برنامه آب و هوا در Django

۶ مرداد۹۹

در این مقاله یک برنامه ساده Django خواهیم ساخت که آب و هوای فعلی را برای شهرهای مختلف نشان می دهد. برای به دست آوردن داده های فعلی هوا ، از Open Weather Map API استفاده خواهیم کرد.
با یک بانک اطلاعاتی کار خواهیم کرد و فرمی ایجاد می کنیم ، بنابراین مفاهیم مورد استفاده در اینجا برای پروژه های پیچیده تری قابل اجرا هستند.
کد موجود در این مقاله با Python 3 و Django 2.0 نوشته شده است ، بنابراین برای دنبال کردن این آموزش ، باید تا حدودی با هر دو آشنا باشید.
وقتی کار ما به پایان رسید، برنامه به این شکل خواهد بود.

تمام کد های این مقاله در GitHub قرار دارند.
نصب و راه اندازی
نصب Django مانند نصب هر کتابخانه دیگری در Python است: شما می توانید یک محیط مجازی را راه اندازی کنید و برای نصب Django ، pip را اجرا کنید ، یا می توانید کاری را که من انجام می دهم انجام دهید و یک دایرکتوری پروژه ایجاد کنید ، pipenv را اجرا کنید و سپس پوسته pipenv را فعال کنید. هر دو روش کار می شود ، اما برای این مقاله از pipenv استفاده می کنم.
⦁ $ pipenv install django
⦁
با این دستور آخرین نسخه Django برای شما نصب می شود. در زمان نوشتن این مقاله ، Django در نسخه 2.0.4 موجود است.
وقتی Django را نصب کردید ، اگر قبلاً دیرکتوری برای این پروژه ندارید ، یک دیرکتوری ایجاد و به داخل آن بروید. در آنجا ، می توانید دستور startproject را که Django به شما می دهد برای تولید پروژه اجرا کنید.
⦁ $ django-admin startproject the_weather
⦁
Django باید چندین فایل جدید را در دیرکتوری شما ایجاد کند.
بیایید سعی کنیم سرور مجازی توسعه را راه اندازی کنیم. برای انجام این کار ، به دیرکتوری جدید بروید و از manage.py برای اجرای دستور runserver در ترمینال خود استفاده کنید:
⦁ $ cd the_weather
⦁
⦁ $ python manage.py runserver

اگر به پایانه خود نگاه کنید ، باید URL برنامه خود را مشاهده کنید. به طور پیش فرض باید 127.0.0.1:8000 باشد.

مرورگر خود را باز کنید و به آن URL بروید.

اگر این را ببینید ، می فهمید که Django را به درستی تنظیم کرده اید. قطعاً باید آن را ببینید زیرا ما هنوز سعی نکرده ایم که کد را اصلاح کنیم.
داشبورد ادمین
در مرحله بعد می خواهیم نگاهی به داشبورد سرور مجازی که Django به ما نشان میدهد، بیاندازیم. برای انجام این کار ، ابتدا باید پایگاه داده خود را جابه جا کنیم ، به این معنی که Django جدولهای از پیش تعریف شده مورد نیاز برنامه های پیش فرض را ایجاد می کند. برای این کار ، دستور migrate را اجرا کنید. سرور مجازی را با استفاده از CTRL + C متوقف و سپس دستور زیر را اجرا کنید:
⦁ $ python manage.py migrate
⦁
با اجرای آن دستور ، Django یک پایگاه داده SQLite برای شما ایجاد کرده است ، بانک اطلاعاتی پیش فرض در تنظیمات ، و چندین جدول به آن پایگاه داده اضافه کرده است. می دانید اگر یک فایل جدید db.sqlite3 را در دیرکتوری پروژه خود مشاهده کنید ، این بانک اطلاعات ایجاد شده است.
یکی از جداولی که Django به ما میدهد جدول کاربر است ، که برای ذخیره هر کاربر در برنامه ما استفاده خواهد شد. برنامه ای که ما در حال ساختن آن هستیم نیازی به هیچ کاربری ندارد ، اما داشتن کاربر ادمین به ما امکان دسترسی به داشبورد ادمین را می دهد.
برای ایجاد یک کاربر ادمین ، دستور createsuperuser را اجرا می کنیم.
⦁ $ python manage.py createsuperuser
⦁
با دادن نام کاربری ، آدرس ایمیل و رمز ورود برای کاربر ادمین خود ، دستورالعمل ها را دنبال کنید. پس از انجام این کار ، باید دوباره سرور مجازی را راه اندازی کنید و به داشبورد سرور مجازی بروید.
⦁ $ python manage.py runserver
⦁
سپس به 127.0.0.1:8000/admin بروید.
دلیل اینکه می توانیم به این صفحه برویم این است که ادمین در urls.py ما تنظیم شده است (دلیل اینکه می توانیم صفحه تبریک را ببینیم این است که Django به شما این امکان را می دهد تا نشانی اینترنتی خود را اضافه کنید(.
اگر با نام کاربری و رمز عبوری که تازه ایجاد کرده اید وارد شوید ، باید داشبورد ادمین Django را ببینید.

گروه ها و کاربران نمایانگر دو مدل هستند که Django به ما دسترسی می دهد. مدل ها فقط تفسیر کدهای جدول از یک پایگاه داده هستند. حتی اگر Django جدولهای بیشتری ایجاد میکرد ، هیچ نیازی به دسترسی مستقیم به بقیه آنها نیست ، بنابراین هیچ مدلی ایجاد نشد.
اگر روی “user” کلیک کنید ، باید جزئیات بیشتری در مورد جدول کاربر مشاهده کنید ، و باید کاربر ایجاد شده را مشاهده کنید. ایده خوبی است که با کلیک روی پیوندهای مختلف در داشبورد ، جستجو کنید تا ببینید چه چیزی در آنجا وجود دارد. فقط مراقب باشید که کاربر خود را حذف نکنید ، در غیر اینصورت مجدداً باید createsuperuser را اجرا کنید.
بگذارید فعلاً داشبورد ادمین را رها کنیم و به سراغ کد برویم. باید برای برنامه هواشناسی خود برنامه ای را در داخل پروژه خود ایجاد کنیم.
ایجاد برنامه
در Django ، می توانید با استفاده از برنامه ها ، عملکرد خود را در پروژه جدا کنید. من فکر می کنم app یک اسم گیج کننده است زیرا ما معمولاً یک app را برای کل پروژه معرفی می کنیم ، اما در مورد Django ، app به عملکرد خاصی در پروژه شما اشاره دارد. به عنوان مثال ، اگر به فایل settings.py نگاه کنید ، لیست INSTALLED_APPS را مشاهده خواهید کرد.
اولین برنامه نصب شده ، django.contrib.admin همان چیزی است که ما اکنون استفاده کردیم. این برنامه همه عملکردهای ادمین را اداره می کند و و هیچ چیز دیگری را شامل نمیشود. برنامه دیگر در پروژه ما به طور پیش فرض مواردی مانند auth است که به ما امکان ورود به داشبورد ادمین ما را می دهد.
در مثال ما ، باید یک app جدید ایجاد کنیم تا همه امور مربوط به نشان دادن آب و هوا را کنترل کنیم. برای ایجاد آن برنامه ، سرور مجازی را با CTRL + C متوقف و دستور زیر را اجرا کنید:
⦁ $ python manage.py startapp weather
⦁
با اجرای startapp ، Django دیرکتوری جدید و فایل های بیشتری را به پروژه ما اضافه کرده است.
با جدیدترین فایل های تولید شده ، بیایید فایل جدیدی به نام urls.py را در دیرکتوری برنامه ایجاد کنیم.
urls.py
from django.urls import path

urlpatterns = [
]

این فایل مشابه urls.py در دیرکتوری the_weather ماست. تفاوت در این است که این فایل urls.py شامل کلیه آدرس های اینترنتی مربوط به خود برنامه است.
ما هنوز URL را مشخص نکرده ایم ، اما می توانیم پروژه را تنظیم کنیم تا برنامه خود را بشناسیم و هر URL خاص به برنامه خود و فایل urls.py برنامه را مسیریابی کنیم.
ابتدا به لیست INSTALLED_APPS بروید و این برنامه را به لیست اضافه کنید.
the_weather/the_weather/settings.py
…

INSTALLED_APPS = [
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
‘weather’,
]

…

این به Django اجازه می دهد بداند که ما برای چه منظور می خواهیم از برنامه هواشناسی در پروژه خود استفاده کنیم. با انجام این کار ، Django می داند که کجا به دنبال جابه جایی و آدرس های اینترنتی باشد.
در مرحله بعدی ، باید urls.py اصلی را تغییر دهیم تا به فایل urls.py برنامه خود اشاره کنیم. برای انجام این کار ، یک خط تحت مسیر موجود برای داشبورد ادمین اضافه می کنیم. همچنین نیاز به وارد کردن include داریم تا بتوانیم به فایل urls.py برنامه خود اشاره کنیم.
the_weather/the_weather/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
path(‘admin/’, admin.site.urls),
path(”, include(‘weather.urls’)),
]

رشته خالی بدان معنی است که ما از نقطه انتهایی برای نقطه ورود به برنامه خود استفاده نمی کنیم. درعوض به برنامه اجازه خواهیم داد تا از نقاط انتهایی خاصی استفاده کند. می توانستیم چیزی شبیه به مسیری قرار دهیم (‘weather/’, …) ، این بدان معنی است که باید 127.0.0.1:8000/weather/ را تایپ کنیم تا هر چیز مرتبط با برنامه آب و هوایی خود را دریافت کنیم. اما از آنجا که پروژه ما ساده است ، آن را اینجا انجام نمی دهیم.
اضافه کردن قالب و نما
در حال حاضر برای اولین کاری که می خواهیم انجام دهیم، باید الگوی خود را به پروژه اضافه کنیم.
یکی از قالب ها در Django تنها یک فایل HTML است که امکان دستور اضافی را می دهد تا این الگو را پویا کند. می توانیم کارهایی مانند اضافه کردن متغیرها ، عبارات if و حلقه ها را علاوه بر موارد دیگر انجام دهیم.
یک فایل HTML داریم ، اما برای شروع ما کافی خواهد بود.
می خواهیم یک دایرکتوری الگو ایجاد کنیم تا این فایل را در آن قرار دهیم.
⦁ cd weather
⦁
⦁ mkdir templates && cd templates
⦁
⦁ mkdir weather

همچنین دایرکتوری دیگری با نام یکسان با برنامه خود ایجاد کردیم. این کار را کردیم زیرا Django تمام دایرکتوری های قالب را از برنامه های مختلفی که در اختیار داریم ترکیب می کند. برای جلوگیری از کپی شدن نام فایل ها ، می توانیم از نام برنامه خود برای جلوگیری از تکرار استفاده کنیم.
در داخل دیرکتوری هواشناسی ، فایل جدیدی با نام index.html ایجاد کنید. این الگوی اصلی ما خواهد بود. در اینجا HTML ای که برای الگو استفاده خواهیم کرد ، آورده شده است:
the_weather/weather/templates/weather/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”>
<title>What’s the weather like?</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css” />
</head>
<body>
<section class=”hero is-primary”>
<div class=”hero-body”>
<div class=”container”>
<h1 class=”title”>
What’s the weather like?
</h1>
</div>
</div>
</section>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-offset-4 is-4″>
<form method=”POST”>
<div class=”field has-addons”>
<div class=”control is-expanded”>
<input class=”input” type=”text” placeholder=”City Name”>
</div>
<div class=”control”>
<button class=”button is-info”>
Add City
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class=”section”>
<div class=”container”>
<div class=”columns”>
<div class=”column is-offset-4 is-4″>
<div class=”box”>
<article class=”media”>
<div class=”media-left”>
<figure class=”image is-50×50″>
<img src=”http://openweathermap.org/img/w/10d.png” alt=”Image”>
</figure>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<span class=”title”>Las Vegas</span>
<br>
<span class=”subtitle”>29° F</span>
<br> thunderstorm with heavy rain
</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</section>
<footer class=”footer”>
</footer>
</body>
</html>

اکنون که الگوی خود را ایجاد کردیم ، بگذارید یک نما و URL ترکیبی ایجاد کنیم تا در واقع بتوانیم این را در برنامه خود مشاهده کنیم.
نماهای موجود در Django یا توابع یا کلاس ها هستند. در مورد ما از آنجا که یک نمای ساده ایجاد می کنیم ، یک تابع ایجاد خواهیم کرد. این تابع را به views.py خود اضافه کنید:
the_weather/weather/views.py
from django.shortcuts import render

def index(request):
return render(request, ‘weather/index.html’) #returns the index.html template

ما نمای خود را index نامگذاری می کنیم زیرا در فهرست برنامه ما ، که URL اصلی است قرار دارد. برای ارائه رندر قالب ، درخواست را باز می گردانیم ، که برای عملکرد رندر لازم است و نام فایل قالب که می خواهیم ارائه دهیم ، در این حالت weather / index.html است.
بیایید URL ای را اضافه کنیم که درخواست را به این نما ارسال کند. در urls.py برای برنامه ، لیست urlpatterns را به روز کنید.
the_weather/weather/urls.py
from django.urls import path
from . import views

urlpatterns = [
path(”, views.index), #the path for our index view
]

این کار به ما امکان می دهد تا نمایی را که تازه ایجاد کردیم ، ارجاع دهیم.
Django قرار است بدون نقطه نهایی با هر URL مطابقت داشته باشد و آن را به سمت تابعی که ایجاد کرده ایم هدایت کند.
به ریشه پروژه خود برگردید ، سرور مجازی را راه اندازی کنید و دوباره به 127.0.0.1:8000 بروید.
⦁ $ python manage.py runserver
⦁

آنچه اکنون می بینیم فقط نتیجه HTML است که در فایل index.html دارید. ورودی برای افزودن شهر و آب و هوای لاس وگاس را مشاهده خواهید کرد. با این حال ، این فرم کار نمی کند و آب و هوا فقط placeholder است ، اما نگران نباشید ، زیرا این موارد را برای این برنامه ایجاد خواهیم کرد.
استفاده از API آب و هوا
کاری که اکنون می خواهیم انجام دهیم ثبت نام در Open Weather Map API است. این کار به ما امکان می دهد آب و هوای واقعی را برای هر شهر که در برنامه خود اضافه می کنیم ، بدست آوریم.
به سایت مذکور بروید ، یک حساب کاربری ایجاد کنید و سپس به سمت کلیدهای API در داشبورد خود بروید. یک نام وارد کنید و یک کلید API جدید تولید کنید. این کلید به ما امکان می دهد تا از API برای به دست آوردن هوا استفاده کنیم.

نقطه پایانی که استفاده خواهیم کرد در زیر آمده است ، بنابراین می توانید با تغییر URL زیر با کلید API و حرکت به URL در مرورگر خود ، داده هایی را که باز می گردانید ، مشاهده می کنید. ممکن است چند دقیقه طول بکشد تا کلید API شما فعال شود ، بنابراین اگر در ابتدا کار نمی کند ، پس از چند دقیقه دوباره امتحان کنید.
http://api.openweathermap.org/data/2.5/weather?q=las%20vegas&units=imperial&appid=YOUR_APP_KEY
پس از این ، بیایید درخواستی اضافه کنیم تا داده ها را وارد برنامه خود کنیم.
ابتدا باید درخواست هایی را نصب کنیم تا بتوانیم از داخل برنامه خود با API تماس بگیریم.
⦁ $ pipenv install requests
⦁
بیایید نمای فهرست را به روز کنیم تا یک درخواست به URL خود بفرستیم.
the_weather/weather/views.py
from django.shortcuts import render
import requests

def index(request):
url = ‘http://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_APP_KEY’
city = ‘Las Vegas’
city_weather = requests.get(url.format(city)).json() #request the API data and convert the JSON to Python data types

return render(request, ‘weather/index.html’) #returns the index.html template

با این سه خط ، URL را اضافه می کنیم که یک درخواست برای آنها ارسال میشود. هنگامی که به کاربران اجازه می دهیم شهرهای خود را اضافه کنند ، این قسمت را برای شهر تبدیل به placeholder خواهیم کرد.
در حال حاضر ما شهر را به عنوان لاس وگاس تنظیم خواهیم کرد ، اما بعداً از طریق پایگاه داده روی شهرها تنظیم می شود.
در آخر ، درخواست را با استفاده از شهر به آدرس اینترنتی ارسال می کنیم و نمایندگی JSON آن شهر را دریافت می کنیم. اگر آن را بر روی کنسول چاپ کنیم می توانیم همان داده هایی را که هنگام قرار دادن URL در نوار آدرس خود قرار داده ایم ، مشاهده کنیم.
اگر دوباره سرور مجازی خود را راه اندازی کنید و صفحه را مجدد لود کنید ، می بینید که داده ها روی کنسول شما چاپ می شوند.

نمایش داده ها در قالب
در مرحله بعد ، باید داده ها را به قالب منتقل کنیم تا بتواند برای کاربر نمایش داده شود.
بیایید یک فرهنگ لغت ایجاد کنیم تا تمام داده های مورد نیاز خود را نگه داریم. از داده های برگشت یافته به ما ، به دما ، توضیحات و نماد نیاز داریم.
the_weather/weather/views.py
def index(request):
…
weather = {
‘city’ : city,
‘temperature’ : city_weather[‘main’][‘temp’],
‘description’ : city_weather[‘weather’][0][‘description’],
‘icon’ : city_weather[‘weather’][0][‘icon’]
}

return render(request, ‘weather/index.html’) #returns the index.html template

اکنون که تمام اطلاعات مورد نظر خود را داریم ، می توانیم آن را به قالب منتقل کنیم. برای انتقال آن به الگو ، متغیری به نام زمینه ایجاد خواهیم کرد. که یک فرهنگ لغت است که به ما امکان می دهد مقادیر آن را در داخل قالب استفاده کنیم.
the_weather/weather/views.py
def index(request):
…
context = {‘weather’ : weather}
return render(request, ‘weather/index.html’, context) #returns the index.html te

و پس از آن در ارائه ، متن را به عنوان آرگومان سوم اضافه خواهیم کرد.
با افزودن داده های آب و هوا در داخل متن ، بیایید به سراغ قالب برویم تا داده ها را اضافه کنیم.
در داخل قالب ، تمام کاری که باید انجام دهیم این است که HTML را اصلاح کنیم تا از متغیرها به جای مقادیری که تایپ کرده ایم استفاده کنیم. متغیرها از برچسب {{}}، استفاده می کنند و هر چیزی را در فرهنگ لغت متن خود ارجاع می دهند.
توجه داشته باشید که Django کلیدهای فرهنگ لغت را تبدیل می کند ، بنابراین تنها با استفاده از نشانه گذاری نقطه ای می توانید به آنها دسترسی پیدا کنید. به عنوان مثال ، weather.city نام شهر را به ما می دهد. مانند پیتون از weather[‘city’] استفاده نمی کنیم.
div جعبه را پیدا کنید و آن را به روز کنید:
the_weather/weather/templates/weather/index.html
<div class=”box”>
<article class=”media”>
<div class=”media-left”>
<figure class=”image is-50×50″>
<img src=”http://openweathermap.org/img/w/{{ weather.icon }}.png” alt=”Image”>
</figure>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<span class=”title”>{{ weather.city }}</span>
<br>
<span class=”subtitle”>{{ weather.temperature }}° F</span>
<br> {{ weather.description }}
</p>
</div>
</div>
</article>
</div>

با جایگزین شدن همه متغیرها ، اکنون باید هوای فعلی را برای شهر خود ببینیم.

اکنون می توانیم هوای یک شهر را ببینیم ، اما مجبور شدیم شهر را کدگذاری کنیم. کاری که اکنون می خواهیم انجام دهیم این است که از بانک اطلاعاتی بیرون بکشیم و شهرهایی را که در پایگاه داده ما هستند نشان دهیم.
برای این کار ، یک جدول در بانک اطلاعاتی خود ایجاد خواهیم کرد تا شهرهایی را که می خواهیم آب و هوا را برای آنها بشناسیم ، در اختیار داشته باشیم. یک مدل برای این منظور ایجاد خواهیم کرد.
به برنامه model.py در برنامه هواشناسی خود بروید و موارد زیر را اضافه کنید:
the_weather/weather/models.py
from django.db import models

class City(models.Model):
name = models.CharField(max_length=25)

def _str_(self): #show the actual city name on the dashboard
return self.name

class Meta: #show the plural of city as cities instead of citys
verbose_name_plural = ‘cities’

این کد یک جدول در دیتابیس ما ایجاد می کند که ستونی به نام name خواهد داشت که نام شهر است. این شهر یک charfield خواهد بود ، که فقط یک رشته است.
برای به دست آوردن این تغییرات در بانک اطلاعاتی ، باید ememigrations را برای تولید کد جهت به روزرسانی بانک اطلاعاتی و جابه جایی برای اعمال آن تغییرات انجام دهیم. بیایید اکنون این کار را انجام دهیم:
⦁ $ python manage.py makemigrations
⦁
⦁ $ python manage.py migrate

باید آن را به جایی تبدیل کنیم که بتوانیم این مدل را در داشبورد ادمین خود مشاهده کنیم. برای انجام این کار ، باید آن را در فایل admin.py خود ثبت کنیم.
the_weather/weather/admin.py
from django.contrib import admin
from .models import City

admin.site.register(City)

شهر را به عنوان گزینه ای در داشبورد ادمین مشاهده خواهید کرد.

سپس می توانیم وارد داشبورد hnldk شویم و برخی از شهرها را اضافه کنیم. من با سه شروع می کنم: لندن ، توکیو و لاس وگاس.

با ورود به دیتابیس ، باید از دید خود این ورودی ها را جستجو کنیم. با وارد کردن مدل City شروع کنید و سپس جستجوی آن مدل برای همه آبجکت ها شروع کنید.
the_weather/weather/views.py
from django.shortcuts import render
import requests
from .models import City
Copy
the_weather/weather/views.py
…
def index(request):
url = ‘http://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_APP_KEY’
cities = City.objects.all() #return all the cities in the database
…

از آنجا که ما لیست شهرها را داریم ، می خواهیم در آنها حلقه بزنیم و هوا را برای هر یک از آنها بدست آوریم و آن را به لیستی اضافه کنیم که در نهایت به قالب منتقل شود.
این فقط تنوع کارهایی است که در مورد اول انجام دادیم. تفاوت دیگر اینست که هر لغت نامه را به یک لیست حلقه و اضافه می کنیم. ما متغیر شهر اصلی را به نفع متغیر شهری در حلقه، حذف خواهیم کرد:
the_weather/weather/views.py
def index(request):
…
weather_data = []

for city in cities:

city_weather = requests.get(url.format(city)).json() #request the API data and convert the JSON to Python data types

weather = {
‘city’ : city,
‘temperature’ : city_weather[‘main’][‘temp’],
‘description’ : city_weather[‘weather’][0][‘description’],
‘icon’ : city_weather[‘weather’][0][‘icon’]
}

weather_data.append(weather) #add the data for the current city into our list

context = {‘weather_data’ : weather_data}
…

اکنون زمینه را برای وارد کردن این لیست به جای یک فرهنگ لغت واحد به روزرسانی می کنیم.
the_weather/weather/views.py
…
context = {‘weather_data’ : weather_data}
…

در مرحله بعد ، در داخل قالب ، باید این لیست را حلقه زده و HTML را برای هر شهر موجود در لیست تولید کنیم. برای این کار می توانیم یک حلقه for حول HTML قرار دهیم که یک جعبه واحد برای شهر ایجاد می کند.
the_weather/weather/index.html
<div class=”column is-offset-4 is-4″>
{% for weather in weather_data %}
<div class=”box”>
<article class=”media”>
<div class=”media-left”>
<figure class=”image is-50×50″>
<img src=”http://openweathermap.org/img/w/{{ weather.icon }}.png” alt=”Image”>
</figure>
</div>
<div class=”media-content”>
<div class=”content”>
<p>
<span class=”title”>{{ weather.city }}</span>
<br>
<span class=”subtitle”>{{ weather.temperature }}° F</span>
<br> {{ weather.description }}
</p>
</div>
</div>
</article>
</div>
{% endfor %}
</div>

اکنون می توانیم داده های مربوط به تمام شهرهایی که در بانک اطلاعات داریم را ببینیم.
ایجاد فرم
آخرین کاری که می خواهیم انجام دهیم این است که کاربر بتواند شهری را مستقیماً در قالب اضافه کند.
برای انجام این کار ، باید یک فرم ایجاد کنیم. می توانستیم فرم را بطور مستقیم ایجاد کنیم ، اما از آنجا که فرم ما دقیقاً همان فیلد مدل ما را خواهد داشت ، می توانیم از ModelForm استفاده کنیم.
یک فایل جدید به نام format.py ایجاد کنید.
the_weather/weather/forms.py
from django.forms import ModelForm, TextInput
from .models import City

class CityForm(ModelForm):
class Meta:
model = City
fields = [‘name’]
widgets = {
‘name’: TextInput(attrs={‘class’ : ‘input’, ‘placeholder’ : ‘City Name’}),
} #updates the input class to have the correct Bulma class and placeholder

برای مشاهده فرم ، باید آن را در نمای خود بسازیم و آن را به قالب منتقل کنیم.
برای انجام این کار ، بگذارید ویدیوی ایندکس را به روز کنیم تا فرم ایجاد شود. متغیر شهر قدیمی را همزمان جایگزین خواهیم کرد زیرا دیگر نیازی به آن نداریم. همچنین باید متن را به روز کنیم تا فرم به قالب منتقل شود.
the_weather/weather/views.py
def index(request):
…
form = CityForm()

weather_data = []
…
context = {‘weather_data’ : weather_data, ‘form’ : form}

اکنون بیایید در قالب ، بخش فرم را به روز کنیم تا از فرم در نمای خود و از csrf_token استفاده کنیم که برای درخواست های POST در Django ضروری است.
<form method=”POST”>
{% csrf_token %}
<div class=”field has-addons”>
<div class=”control is-expanded”>
{{ form.name }}
</div>
<div class=”control”>
<button class=”button is-info”>
Add City
</button>
</div>
</div>
</form>

با استفاده از فرم موجود در HTML ، باید داده های فرم را در صورت ورود به آن مدیریت کنیم. برای این کار ، یک بلوک if ایجاد می کنیم که درخواست POST را بررسی میکند. قبل از شروع گرفتن اطلاعات آب و هوا ، باید بررسی نوع درخواست را اضافه کنیم ، بنابراین بلافاصله داده های مربوط به شهری را که اضافه می کنیم ، دریافت می نماییم.
the_weather/weather/views.py
def index(request):
cities = City.objects.all() #return all the cities in the database

url = ‘http://api.openweathermap.org/data/2.5/weather?q={}&units=imperial&appid=YOUR_APP_KEY’

if request.method == ‘POST’: # only true if form is submitted
form = CityForm(request.POST) # add actual request data to form for processing
form.save() # will validate and save if validate

form = CityForm()
…

با ارسال request.POST می توانیم داده های فرم را تأیید کنیم.
اکنون باید بتوانید نام یک شهر را تایپ کنید ، روی add کلیک کنید ، و آن را ببینید. میامی را به عنوان شهر بعدی اضافه خواهم کرد.

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

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:Django, migrate, Open Weather Map API, pipenv, Python

۰ نظر

behnam gol mohamadi

تأیید رمز عبور با استفاده از درخواست فرم Laravel

۶ مرداد۹۹

درخواست های فرم Laravel کلاس های خاصی هستند که قابلیت استفاده از کلاس های درخواست منظم را افزایش می دهند و ویژگی های پیشرفته ای برای اعتبارسنجی را فراهم می آورد. درخواست های فرم همچنین به منظم نگه داشتن اقدامات کنترل کننده کمک می کند ، زیرا می توانید تمام منطق اعتبار خود را به کلاس درخواست فرم منتقل کنید. مزیت دیگر این است که به شما امکان می دهد تا قبل از رسیدن به اقدامات کنترل کننده خود ، درخواست ها را فیلتر کنید.
در این راهنما ، مرحله تأیید گذرواژه را برای شما اجرا خواهیم کرد تا درخواست کنید که یک کاربر رمز عبور خود را قبل از دسترسی به ناحیه ادمین تأیید کند. این عمل به عنوان یک بررسی مضاعف عمل می کند و یک لایه امنیتی بیشتر برای برنامه شما فراهم می کند.
پیش نیازها
برای دنبال کردن این راهنما ، به یک برنامه کاربردی Laravel 5.6+ با ستاپ داخلی تأیید اعتبار Laravel نیاز دارید. لطفاً برای جزئیات بیشتر در مورد چگونگی تنظیم این کار ، مستندات رسمی را مطالعه کنید.
مرحله 1 – ایجاد نما
قصد داریم با تنظیم صفحه پروفایل ویرایش کاربر شروع کنیم.
در زمان نوشتن این آموزش ، ابزار فرمان artisan نمایی ایجاد نمی کرد ، بنابراین ما نیاز به ایجاد نما به صورت دستی داریم.
فایل resources/views/profile/edit.blade.php را ایجاد کرده و کد زیر را اضافه کنید.
@extends(‘layouts.app’)

@section(‘content’)
<div class=”container”>
@if (session(‘info’))
<div class=”row”>
<div class=”col-md-12″>
<div class=”alert alert-success alert-dismissible”>
<button type=”button” class=”close” data-dismiss=”alert” aria-hidden=”true”>×</button>
{{ session(‘info’) }}
</div>
</div>
</div>
@elseif (session(‘error’))
<div class=”row”>
<div class=”col-md-12″>
<div class=”alert alert-danger alert-dismissible”>
<button type=”button” class=”close” data-dismiss=”alert” aria-hidden=”true”>×</button>
{{ session(‘error’) }}
</div>
</div>
</div>
@endif
<div class=”row”>
<div class=”col-md-8 col-md-offset-2″>
<div class=”panel panel-default”>
<div class=”panel-heading”>Update Profile</div>

<div class=”panel-body”>
<form class=”form-horizontal” method=”POST” action=”{{ route(‘profile.update’, [‘user’ => $user]) }}”>
{{ csrf_field() }}
{{ method_field(‘PUT’) }}
<div class=”form-group{{ $errors->has(‘name’) ? ‘ has-error’ : ” }}”>
<label for=”name” class=”col-md-4 control-label”>Name</label>
<div class=”col-md-6″>
<input id=”name” type=”text” class=”form-control” name=”name” value=”{{ $user->name }}”>

@if ($errors->has(‘name’))
<span class=”help-block”>
<strong>{{ $errors->first(‘name’) }}</strong>
</span>
@endif
</div>
</div>

<div class=”form-group{{ $errors->has(‘password’) ? ‘ has-error’ : ” }}”>
<label for=”password” class=”col-md-4 control-label”>Password</label>

@if ($errors->has(‘password’))
<span class=”help-block”>
<strong>{{ $errors->first(‘password’) }}</strong>
</span>
@endif
</div>
</div>

<div class=”form-group”>
<label for=”password-confirm” class=”col-md-4 control-label”>Confirm Password</label>

<div class=”form-group{{ $errors->has(‘current_password’) ? ‘ has-error’ : ” }}”>
<label for=”current-password” class=”col-md-4 control-label”>Current Password</label>

@if ($errors->has(‘current_password’))
<span class=”help-block”>
<strong>{{ $errors->first(‘current_password’) }}</strong>
</span>
@endif
</div>
</div>

<div class=”form-group”>
<div class=”col-md-6 col-md-offset-4″>
<button type=”submit” class=”btn btn-primary”>
Update
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection

در صفحه “ویرایش نمایه” ما ، یک پیام فلش info و error را بررسی می کنیم و آن را به کاربر نمایش می دهیم.
این قسمت دارای فیلدهای نام ، رمزعبور ، گذرواژه ، تأیید رمزعبور و رمز عبور فعلی است.
روشی که ما می خواهیم آن را عملیاتی کنیم این است که هر زمان که کاربر تغییری ایجاد کرد ، باید فیلد صحیح پسورد فعلی را برای ارائه به روزرسانی به دیتابیس ارائه دهند.
فیلدهای رمزعبور و تایید رمز عبور به کاربر امکان تغییر رمز عبور خود را می دهد. در صورت خالی ماندن ، گذرواژه فعلی کاربر حفظ خواهد شد و هیچ تغییری در رمز عبور ذخیره شده آنها ایجاد نمی شود.
متغیرهای اصلی در نمای ما فیلدهای رمز عبور ، تایید رمز عبور ، و رمز عبور فعلی هستند.
همانند فیلد نام ، یک مثال برای گسترش و افزودن فیلدهای بیشتر به فایل شما ارائه میدهد.
مرحله 2 – ایجاد درخواست فرم
اکنون به مهمترین قسمت این آموزش میپردازیم.
دستور زیر را برای ایجاد درخواست فرم اجرا کنید.
⦁ php artisan make:request UpdateProfile
⦁

دستور فوق فایلی را با نام app / Http / Requests / UpdateProfile.php ایجاد می کند.
کلیه تغییرات کد در این بخش در این فایل ایجاد می شود.
اولین کاری که باید انجام دهیم دادن نام مستعار به Laravel’s Hash facade قبل از اعلامیه کلاس است.
use Illuminate\Support\Facades\Hash;
Copy
در مرحله بعد ، از آنجا که در درخواست فرم خود تایید هویت را انجام نمی دهیم ، باید از روش authorize خود true را برگردانیم.
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}

روش قوانین آرایه ای را ارائه می دهد که به تشریح قوانین اعتبارسنجی برای این درخواست می پردازد.
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
‘name’ => ‘required|string|max:255’,
‘password’ => ‘nullable|required_with:password_confirmation|string|confirmed’,
‘current_password’ => ‘required’,
];
}

قوانین name و current_password خود توصیفی هستند.
قوانین password بیان می کند که رمز عبور با استفاده از اعلامیه confirmed تأیید می شود.
همچنین required_with:password_confirmation را اعلام می کند به این معنی که اگر کاربر تأیید رمز عبور را ارائه دهد ، باید رمز عبور نیز ارائه کند.
این قوانین اعتبارسنجی به طور خودکار پس از هر درخواستی که در عملکرد کنترلر خود تایپ کنیم ، بررسی می شوند.
آخرین کاری که باید انجام دهیم اینست که یک روش withValidator روی درخواست خود اعلام کنیم که قبل از ابطال هرگونه قانون اعتبارسنجی ، نمونه اعتبار سنجی کاملاً ساخته شده را وارد کند.
/**
* Configure the validator instance.
*
* @param \Illuminate\Validation\Validator $validator
* @return void
*/
public function withValidator($validator)
{
// checks user current password
// before making changes
$validator->after(function ($validator) {
if ( !Hash::check($this->current_password, $this->user()->password) ) {
$validator->errors()->add(‘current_password’, ‘Your current password is incorrect.’);
}
});
return;
}

در داخل روش withValdator ، قلاب after را اضافه کرده ایم ، عملکردی که بعد از انجام همه بررسی های اعتبار سنجی ، اجرا خواهد شد.
در قلاب after ، گذرواژه ارائه شده کاربر را با گذرواژه آنها در پایگاه داده مقایسه کردیم.
$ this-> current_password مقدار فعلی فیلد فرم شکل فعلی current_password را به ما می دهد در حالی که Laravel به ما اجازه می دهد تا با استفاده از $ this-> user ()به کاربر معتبر فعلی دسترسی داشته باشیم ، بنابراین $this->user()->password رمز عبور درهم سازی شده کاربر ذخیره شده در پایگاه داده را به ما میدهد.
این دو گذرواژه با استفاده از روش Hash facade’s check مقایسه می شوند.
در صورت عدم موفقیت آمیز بودن بررسی hash ، خطایی با کلید current_password با استفاده از $validator->errors()->add(‘current_password’, ‘Your current password is incorrect.’). به اعتبار سنج اضافه میشود.
در اینجا درخواست فرم کامل UpdateProfile ما آمده است.
<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

use Illuminate\Support\Facades\Hash;

class UpdateProfile extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}

/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
‘name’ => ‘required|string|max:255’,
‘password’ => ‘nullable|required_with:password_confirmation|string|confirmed’,
‘current_password’ => ‘required’,
];
}

/**
* Configure the validator instance.
*
* @param \Illuminate\Validation\Validator $validator
* @return void
*/
public function withValidator($validator)
{
// checks user current password
// before making changes
$validator->after(function ($validator) {
if ( !Hash::check($this->current_password, $this->user()->password) ) {
$validator->errors()->add(‘current_password’, ‘Your current password is incorrect.’);
}
});
return;
}
}

مرحله 3 – تنظیم کنترلر
برای استفاده از درخواست فرم ، لازم است که آن را در عملکرد کنترلر خود تایپ کنید.
دستور زیر را برای تولید کنترلر پروفایل انجام دهید.
⦁ $ php artisan make:controller ProfileController
⦁

فایل app/Http/Controllers/ProfileController.php را باز کنید و اقدامات کنترلی زیر را اضافه کنید.
public function __construct()
{
$this->middleware(‘auth’);
}

/**
* Show the form for editing the specified resource.
*
* @param \App\User $user
* @return \Illuminate\Http\Response
*/
public function edit(Request $request, User $user)
{
// user
$viewData = [
‘user’ => $user,
];
// render view with data
return view(‘profile.edit’, $viewData);
}

/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\User $user
* @return \Illuminate\Http\Response
*/
public function update(UpdateProfile $request, User $user)
{
// form data
$data = $request->all();
$user->update($data);
return redirect(route(‘profile.edit’, [‘user’ => $user]))
->with(‘info’, ‘Your profile has been updated successfully.’);
}

سازنده کنترلر پروفایل ، میان افزار auth را تنظیم می کند تا مطمئن شود کاربر قبل از ویرایش مشخصات خود وارد شده است.
عملکرد ویرایش با داده های نما ، view را نشان میدهد در حالی که عملکرد به روزرسانی نمایه کاربر را به روز می کند و پیغام فلش مربوط به صفحه نمایه ویرایش را مجدداً برمیگرداند.
به امضای عملکرد ویرایش توجه داشته باشید ، جایی که ما درخواست UpdateProfile را تایپ کرده ایم ، که همه کاری است که باید انجام دهیم تا اعتبارات داخل درخواست فرم UpdateProfile را باطل کنیم.
همچنین باید قبل از اعلام کلاس کنترلر، درخواست فرم و مدل کاربر را مستعار کنید.
use App\Http\Requests\UpdateProfile;
use App\User;

مرحله 4 – تنظیم مسیرهای محافظت شده و جهش های داده
فایل app/routes/web.php را باز کنید و کد زیر را برای اتصال به اقدامات کنترلر اضافه کنید.
Route::get(‘/profile/{user}/edit’, ‘ProfileController@edit’)->name(‘profile.edit’);
Route::put(‘/profile/{user}’, ‘ProfileController@update’)->name(‘profile.update’);

براساس قانون اعتبارسنجی که قبلاً به درخواست فرم خود اضافه کردیم ، امکان عبور رمز عبور null وجود دارد.
تحت هیچ شرایطی کاربر (یا یک توسعه دهنده برنامه) نمی خواهد رمزعبور خود را به صورت تهی یا رشته ای خالی تنظیم کند.
برای اطمینان از اینکه گذرواژه کاربر فقط بعد از وارد کردن توسط آن ها، تنظیم شده است ، قصد داریم از جهش دهنده های Eloquent ORM استفاده کنیم.
فایل app/User.php را باز کنید و کد زیر را اضافه کنید.
// Only accept a valid password and
// hash a password before saving
public function setPasswordAttribute($password)
{
if ( $password !== null & $password !== “” )
{
$this->attributes[‘password’] = bcrypt($password);
}
}

جهش دهنده های فصیح باید از طرح نامگذاری set<camel-cased-attribute-name>Attribute پیروی کنند.
از آنجا که ما در حال اعلام یک جهش دهنده برای ویژگی رمز عبور هستیم ، از این رو جهشگر را setPasswordAttribute نامگذاری کرده ایم.
تابع جهشگر مقدار تعیین شده را منتقل می کند که در جهشگر ما متغیر $password است.
در جهشگر ما ، بررسی می کنیم که آیا متغیر $password null یا یک رشته خالی نباشد و آن را با استفاده از $this->attributes[‘password’] در مدل خود تنظیم می کنیم.
همچنین توجه داشته باشید که گذرواژه قبل از ذخیره کردن hashed شده است ، بنابراین نیازی نیست که آن را در جای دیگری در برنامه خود انجام دهیم.
Auth/RegisterController و Auth/ResetPasswordController پیش فرض Laravel نیز پسورد را قبل از نگهداری آن در دیتابیس دارند، بنابراین باید بعد از اعلام جهش فوق ، روش create و resetPassword را در کنترلرهای مربوطه به روز کنیم.
فایل app/Http/Controllers/Auth/RegisterController.php را باز کرده و کد زیر را اضافه کنید.
/**
* Create a new user instance after a valid registration.
*
* @param array $data
* @return \App\User
*/
protected function create(array $data)
{
return User::create([
‘name’ => $data[‘name’],
’email’ => $data[’email’],
‘password’ => $data[‘password’],
]);
}

فایل app/Http/Controllers/Auth/ResetPasswordController.php را باز کرده و کد زیر را اضافه کنید.
/**
* Reset the given user’s password.
*
* @param \Illuminate\Contracts\Auth\CanResetPassword $user
* @param string $password
* @return void
*/
protected function resetPassword($user, $password)
{
$user->password = $password;

$user->setRememberToken(Str::random(60));

$user->save();

event(new PasswordReset($user));

$this->guard()->login($user);
}

برای ResetPasswordController ، همچنین باید کلاسهای مربوطه را که قبل از اعلام کلاس استفاده می شود ، مستعار کنید.
use Illuminate\Support\Str;
use Illuminate\Auth\Events\PasswordReset;

کار ما تمام شد و تأیید رمز عبور ما مطابق آنچه انتظار می رود کار می کند.
اجرای آزمایشی برنامه هنگام ارائه یک رمزعبور نادرست یا خالی گذاشتن آن، نتیجه زیر را به همراه دارد که توسط تصاویر نشان داده شده است.

نتیجه
در این راهنما ، چگونگی اجرای مرحله اضافی تأیید گذرواژه را برای اثبات اینکه کاربر مجاز به دسترسی به یک ناحیه ادمین است ، مشاهده کردیم. همچنین شاهد نحوه ایجاد و تنظیم درخواست فرم برای اجرای اعتبار سنجی فرم در یک برنامه Laravel بودیم.
برای کسب اطلاعات بیشتر در مورد اعتبار سنجی و درخواست فرم ، می توانید مستندات رسمی Laravel را بررسی کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:Laravel, withValidator

۰ نظر

behnam gol mohamadi

استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

۶ مرداد۹۹

یک تراکنش MySQL گروهی از دستورات SQL است که به طور منطقی مرتبط هستند و به عنوان یک یونیت واحد در بانک اطلاعاتی اجرا می شوند. تراکنش ها برای اجرای ACID (Atomicity, Consistency, Isolation, Durability ) یعنی ظرفیت ، ثبات ، انزوا و دوام در یک برنامه استفاده می شود. در واقع مجموعه ای از استانداردها است که قابلیت اطمینان عملیات پردازش را در یک پایگاه داده هدایت می کند.
در صورت بروز خطا ، Atomicity موفقیت تراکنش های مرتبط یا شکست کامل را تضمین می کند. Consistency ، اعتبار داده های ارسالی به پایگاه داده را مطابق با منطق تعریف شده کسب و کار تضمین می کند. Isolation ، اجرای صحیح تراکنش های همزمان است که تضمین میکند مشتری های مختلفی که به یک بانک اطلاعاتی متصل می شوند ، بر یکدیگر تأثیر نمی گذارند. Durability تضمین می کند که تراکنش ها مرتبط از لحاظ منطقی به طور دائم در پایگاه داده باقی بمانند.
عبارات SQL صادر شده از طریق تراکنش یا باید موفقیت آمیز باشد یا در کل با شکست پایان یابد. در صورت عدم موفقیت هر یک از جستارها، MySQL تغییرات را پس می زند و هرگز به پایگاه داده ارائه نمی کند.
یک مثال خوب برای درک نحوه عملکرد تراکنش ها MySQL یک وب سایت تجارت الکترونیکی است. هنگامی که مشتری سفارش می دهد ، بسته به منطق کسب و کار ، برنامه سوابق را در چندین جدول مانند: orders و orders_products درج می کند. سوابق چند جدولی مربوط به یک سفارش واحد باید به صورت اتمی به عنوان یک یونیت منطقی واحد به بانک اطلاعاتی ارسال شود.
مورد دیگر استفاده در یک برنامه بانکی است. هنگامی که مشتری در حال انتقال پول است ، چند تراکنش به بانک اطلاعاتی ارسال می شوند. حساب فرستنده بدهکار میشود و به حساب طرف گیرنده اعتبار داده می شود. این دو تراکنش باید همزمان انجام شود. اگر یکی از آنها موفقیت آمیز نباشد ، پایگاه داده به حالت اصلی خود بازمیگردد و هیچ تغییری در دیسک ذخیره نمی شود.
در این آموزش ، شما از افزونه PDO PHP استفاده می کنید که واسطی برای کار با بانکهای داده در PHP ، جهت انجام تراکنش ها MySQL روی یک سرور مجازی Ubuntu 18.04 ، فراهم می کند.
پیش نیازها
قبل از شروع به موارد زیر نیاز خواهید داشت:
⦁ یک سرور مجازی Ubuntu 18.04 که با دنبال کردن راهنمای راه اندازی سرور مجازی اولیه با اوبونتو 18.04 نصب شده باشد و شامل یک کاربر غیر ریشه سودو باشد.
⦁ Apache ، MySQL و PHP که روی سیستم شما نصب شده باشند. شما می توانید راهنمای نحوه نصب پشته Linux ، Apache ، MySQL ، PHP (LAMP) روی Ubuntu 18.04 را دنبال کنید. می توانید مرحله 4 (تنظیم میزبان های مجازی) را جست و جو کنید و مستقیماً با تنظیمات پیش فرض آپاچی کار کنید.
مرحله 1 – ایجاد یک بانک اطلاعاتی و جداول نمونه
ابتدا یک بانک اطلاعاتی نمونه ایجاد می کنید و قبل از شروع کار با تراکنش های MySQL ، چند جدول اضافه کنید. ابتدا به عنوان root به سرور مجازی MySQL خود وارد شوید:
⦁ $ sudo mysql -u root -p
⦁
در صورت درخواست ، رمزعبور ریشه MySQL خود را وارد کرده و ENTER را بزنید تا ادامه یابد. سپس ، یک بانک اطلاعاتی ایجاد کنید ، برای اهداف این آموزش ما با پایگاه داده sample_store را فراخوانی کنیم:
⦁ Mysql> CREATE DATABASE sample_store;
⦁
خروجی زیر را مشاهده خواهید کرد:
Output
Query OK, 1 row affected (0.00 sec)

یک کاربر به نام sample_user برای پایگاه داده خود ایجاد کنید. به یاد داشته باشید که PASSWORD را با یک مقدار قوی جایگزین کنید:
⦁ Mysql> CREATE USER ‘sample_user’@’localhost’ IDENTIFIED BY ‘PASSWORD’;
⦁

امتیازات کاملی را برای کاربر خود به پایگاه داده sample_store صادر کنید:
⦁ Mysql> GRANT ALL PRIVILEGES ON sample_store.* TO ‘sample_user’@’localhost’;
⦁

در آخر ، امتیازات MySQL را مجدد لود کنید:
⦁ Mysql> FLUSH PRIVILEGES;
⦁
وقتی کاربر خود را ایجاد کردید ، خروجی زیر را مشاهده خواهید کرد:
Output
Query OK, 0 rows affected (0.01 sec)
. . .

با قرارگیری پایگاه داده و کاربر در جای خود ، می توانید چندین جدول برای نشان دادن نحوه عملکرد تراکنش ها MySQL ایجاد کنید.
از سرور مجازی MySQL خارج شوید:
⦁ Mysql> QUIT;
⦁
پس از خروج از سیستم ، خروجی زیر را مشاهده خواهید کرد:
Output
Bye.

سپس با اعتبار sample_user که تازه ایجاد کرده اید وارد شوید:
⦁ $ sudo mysql -u sample_user -p
⦁
کلمه عبور را برای sample_user وارد کنید و برای ادامه ، ENTER را بزنید.
برای تبدیل شدن آن به پایگاه داده فعلی انتخاب شده ، به sample_store سوییچ کنید:
⦁ Mysql> USE sample_store;
⦁

پس از انتخاب خروجی زیر را مشاهده خواهید کرد:
Output
Database Changed.

بعد ، یک جدول products ایجاد کنید:
⦁ Mysql> CREATE TABLE products (product_id BIGINT PRIMARY KEY AUTO_INCREMENT, product_name VARCHAR(50), price DOUBLE) ENGINE = InnoDB;
⦁

این دستور یک جدول products با فیلدی به نام product_id ایجاد می کند. شما از یک نوع داده BIGINT استفاده می کنید که می تواند مقدار زیادی تا 2^63-1 را در خود جای دهد. برای شناسایی منحصر به فرد محصولات از این فیلد به عنوان کلید اصلی استفاده می کنید. کلمه کلیدی AUTO_INCREMENT به MySQL دستور می دهد تا با وارد کردن محصولات جدید ، عددی بعدی ایجاد شود.
قسمت product_name از نوع VARCHAR است که می تواند حداکثر 50 حرف یا عدد را در خود نگه دارد. برای قیمت محصول ، از یک نوع داده DOUBLE برای تهیه قالب های نقطه شناور در قیمت ها با عدد اعشاری استفاده می کنید.
سرانجام ، از InnoDB به عنوان ENGINE استفاده می کنید زیرا برخلاف سایر موتورهای ذخیره سازی مانند MyISAM ، به راحتی از تراکنش های MySQL پشتیبانی می کند.
هنگامی که جدول محصولات خود را ایجاد کردید ، خروجی زیر را دریافت خواهید کرد:
Output
Query OK, 0 rows affected (0.02 sec)

در مرحله بعد با اجرای دستورات زیر برخی موارد را به جدول محصولات اضافه کنید:
⦁ Mysql> INSERT INTO products(product_name, price) VALUES (‘WINTER COAT’,’25.50′);
⦁
⦁ Mysql> INSERT INTO products(product_name, price) VALUES (‘EMBROIDERED SHIRT’,’13.90′);
⦁
⦁ Mysql> INSERT INTO products(product_name, price) VALUES (‘FASHION SHOES’,’45.30′);
⦁
⦁ Mysql> INSERT INTO products(product_name, price) VALUES (‘PROXIMA TROUSER’,’39.95′);

بعد از هر عمل INSERT ، خروجی مشابه زیر را مشاهده خواهید کرد:
Output
Query OK, 1 row affected (0.02 sec)
. . .

سپس بررسی کنید که داده ها به جدول محصولات اضافه شده باشند:
⦁ Mysql> SELECT * FROM products;
⦁
لیستی از چهار کالایی را که درج کرده اید خواهید دید:
Output
+————+——————-+——-+
| product_id | product_name | price |
+————+——————-+——-+
| 1 | WINTER COAT | 25.5 |
| 2 | EMBROIDERED SHIRT | 13.9 |
| 3 | FASHION SHOES | 45.3 |
| 4 | PROXIMA TROUSER | 39.95 |
+————+——————-+——-+
4 rows in set (0.01 sec)

در مرحله بعدی ، شما یک جدول customers برای نگهداری اطلاعات اولیه درباره مشتریان ایجاد خواهید کرد:
⦁ Mysql> CREATE TABLE customers (customer_id BIGINT PRIMARY KEY AUTO_INCREMENT, customer_name VARCHAR(50) ) ENGINE = InnoDB;
⦁

همانطور که در جدول محصولات وجود دارد ، از نوع داده BIGINT برای customer_idاستفاده می کنید و این تضمین می کند که جدول می تواند تعداد زیادی مشتری تا 2^63-1 را پشتیبانی کند. کلمه کلیدی AUTO_INCREMENT پس از وارد کردن مشتری جدید ، مقدار ستون ها را افزایش می دهد.
از آنجا که ستون customer_name الفبا را می پذیرد، از نوع داده VARCHAR با محدودیت 50 کاراکتر استفاده می کنید. باز هم ، برای پشتیبانی از تراکنش ها از ENGINE ذخیره سازی InnoDB استفاده می کنید.
پس از اجرای دستور قبلی برای ایجاد جدول مشتری ، خروجی زیر را مشاهده خواهید کرد:
Output
Query OK, 0 rows affected (0.02 sec)

شما سه مشتری نمونه به جدول اضافه خواهید کرد. دستورات زیر را اجرا کنید:
⦁ Mysql> INSERT INTO customers(customer_name) VALUES (‘JOHN DOE’);
⦁
⦁ Mysql> INSERT INTO customers(customer_name) VALUES (‘ROE MARY’);
⦁
⦁ Mysql> INSERT INTO customers(customer_name) VALUES (‘DOE JANE’);
پس از افزودن مشتریان ، خروجی مشابه با زیر را مشاهده خواهید کرد:
Output
Query OK, 1 row affected (0.02 sec)
. . .

در مرحله بعد ، می توانید برای ثبت سفارشات توسط مشتریان مختلف ، جدول سفارشات ایجاد کنید. برای ایجاد جدول سفارشات ، دستور زیر را اجرا کنید:
⦁ Mysql> CREATE TABLE orders (order_id BIGINT AUTO_INCREMENT PRIMARY KEY, order_date DATETIME, customer_id BIGINT, order_total DOUBLE) ENGINE = InnoDB;
⦁

از ستون order_id بعنوان کلید اصلی استفاده می کنید. نوع داده های BIGINT به شما امکان می دهد تا حداکثر 2 ^ 63-1 سفارش را در خود جای دهید و پس از هر درج سفارش ، خودکار افزایش می یابد. قسمت rend_date تاریخ و زمان واقعی سفارش را نگه می دارد و از این رو ، از نوع داده DATETIME استفاده می کنید. customer_id به جدول مشتریانی که قبلاً ایجاد کرده اید مربوط می شود.
خروجی زیر را مشاهده خواهید کرد:
Output
Query OK, 0 rows affected (0.02 sec)

از آنجا که سفارش یک مشتری ممکن است شامل چندین مورد باشد ، برای نگه داشتن این اطلاعات باید یک جدول orders_productsرا ایجاد کنید.
برای ایجاد جدول order_products ، دستور زیر را اجرا کنید:
⦁ Mysql> CREATE TABLE orders_products (ref_id BIGINT PRIMARY KEY AUTO_INCREMENT, order_id BIGINT, product_id BIGINT, price DOUBLE, quantity BIGINT) ENGINE = InnoDB;
⦁

شما از ref_id بعنوان کلید اصلی استفاده می کنید و پس از هر درج رکورد به طور خودکار افزایش می یابد. order_id و product_id به ترتیب مربوط به جداول سفارشات و محصولات هستند. ستون قیمت از نوع داده DOUBLE به منظور جایگذاری مقادیر شناور است.
موتور ذخیره سازی InnoDB باید با جداول دیگری که قبلاً ایجاد شده است مطابقت داشته باشد زیرا سفارش یک مشتری واحد روی چندین جدول بطور همزمان با استفاده از تراکنش ها تأثیر می گذارد.
خروجی شما ایجاد جدول را تأیید می کند:
Output
Query OK, 0 rows affected (0.02 sec)

اکنون نمی توانید هیچ داده ای را به جداول سفارشات و orders_products اضافه کنید اما بعداً با استفاده از یک اسکریپت PHP که تراکنش ها MySQL را انجام می دهد ، این کار را انجام می دهید.
از سرور مجازی MySQL خارج شوید:
⦁ Mysql> QUIT;
⦁
شمای پایگاه داده شما اکنون کامل است و آن را با برخی از فایل ها جمع کرده اید. اکنون یک کلاس PHP برای مدیریت اتصالات پایگاه داده و تراکنش ها MySQL ایجاد خواهید کرد.
مرحله 2 – طراحی کلاس PHP برای انجام تراکنش های MySQL
در این مرحله ، شما یک کلاس PHP ایجاد می کنید که از PDO (PHP Data Objects) برای انجام تراکنش های MySQL استفاده می کند. این کلاس به پایگاه داده MySQL شما متصل می شود و داده ها را بصورت اتمی به پایگاه داده وارد می کند.
فایل کلاس را در دیرکتوری اصلی سرور مجازی وب Apache خود ذخیره کنید. برای این کار ، یک فایل DBTransaction.php را با استفاده از ویرایشگر متن خود ایجاد کنید:
⦁ $ sudo nano /var/www/html/DBTransaction.php
⦁

سپس کد زیر را به فایل اضافه کنید. PASSWORD را با مقدار ایجاد شده در مرحله 1 جایگزین کنید:
/var/www/html/DBTransaction.php
<?php

class DBTransaction
{
protected $pdo;
public $last_insert_id;

public function __construct()
{
define(‘DB_NAME’, ‘sample_store’);
define(‘DB_USER’, ‘sample_user’);
define(‘DB_PASSWORD’, ‘PASSWORD’);
define(‘DB_HOST’, ‘localhost’);

$this->pdo = new PDO(“mysql:host=” . DB_HOST . “;dbname=” . DB_NAME, DB_USER, DB_PASSWORD);
$this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$this->pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
}

با شروع کلاس DBTransaction ، PDO از ثابت ها (DB_HOST ، DB_NAME ، DB_USER و DB_PASSWORD) برای مقداردهی اولیه و اتصال به دیتابیس که در مرحله 1 ایجاد کرده اید استفاده می کند.
توجه: از آنجا که ما تراکنش های MySQL را در یک مقیاس کوچک در اینجا نشان می دهیم ، متغیرهای پایگاه داده را در کلاس DBTransaction اعلام کردیم. در یک پروژه تولیدی بزرگ ، معمولاً یک فایل پیکربندی جداگانه ایجاد می کنید و ثابت های پایگاه داده را از آن فایل با استفاده از یک عبارت PHP need_once لود می کنید.

در مرحله بعد ، برای کلاس PDO دو ویژگی تعیین می کنید:
⦁ ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION این ویژگی به PDO دستور می دهد اگر خطایی رخ دهد ، استثنائی را ارائه کند. چنین خطاهایی را می توان برای اشکال زدایی ثبت کرد.
⦁ ATTR_EMULATE_PREPARES, false این گزینه تقلید جملات آماده را غیرفعال می کند و به موتور پایگاه داده MySQL اجازه می دهد تا خود بیانیه ها را آماده کند.
اکنون کد زیر را به فایل خود اضافه کنید تا روش هایی برای کلاس شما ایجاد شود:
/var/www/html/DBTransaction.php
. . .
public function startTransaction()
{
$this->pdo->beginTransaction();
}

public function insertTransaction($sql, $data)
{
$stmt = $this->pdo->prepare($sql);
$stmt->execute($data);
$this->last_insert_id = $this->pdo->lastInsertId();
}

public function submitTransaction()
{
try {
$this->pdo->commit();
} catch(PDOException $e) {
$this->pdo->rollBack();
return false;
}

return true;
}
}

با فشار دادن CTRL + X ، Y ، سپس enter فایل را ذخیره کرده و ببندید.
برای کار با تراکنش های MySQL ، شما سه روش اصلی را در کلاس DBTransaction ایجاد می کنید. startTransaction ، insertTransaction و submitTransaction.
⦁ startTransaction: این روش به PDO دستور می دهد تا تراکنش را شروع کند و تا زمان صدور فرمان ارائه ، ارائه خودکار را خاموش کند.
⦁ insertTransaction: این روش دو آرگومان را می گیرد. متغیر sql $ بیانیه SQL را اجرا می کند در حالی که متغیر data $ مجموعه ای از داده هایی است که باید به عبارت SQL متصل شود چرا که شما زا عبارات آماده استفاده میکنید. داده ها به عنوان آرایه ای به روش insertTransaction منتقل می شوند.
⦁ submitTransaction : این روش با صدور فرمان commit() تغییراتی را به صورت دائم در پایگاه داده ایجاد میکند.با این حال، اگر خطایی رخ داده و تراکنش ها مشکلی داشته باشند ، در صورت مطرح شدن استثناء PDO ، روش RollBack () را برای بازگردانی پایگاه داده به حالت اولیه خود فراخوانی می کند.
کلاس DBTransaction شما یک تراکنش را آغاز می کند ، دستورات مختلف SQL را برای اجرا آماده می کند و در صورت عدم وجود مشکل ، تغییرات دیتابیس را به صورت اتمی ارائه می دهد. علاوه بر این ، کلاس به شما امکان می دهد تا با دسترسی به مشخصه های عمومی last_insert_id ، رکورد rend_id را که اخیراً ایجاد کرده اید ، بازیابی کنید.
کلاس DBTransaction اکنون آماده است که با استفاده از هر کد PHP ، که در مرحله بعدی ایجاد خواهید کرد ، فراخوانی و استفاده شود.
مرحله 3 – ایجاد یک اسکریپت PHP برای استفاده از کلاس DBTransaction
شما یک اسکریپت PHP ایجاد خواهید کرد کلاس DBTransaction را پیاده سازی می کند و گروهی از دستورات SQL را به پایگاه داده MySQL ارسال می کند. گردش کار سفارش مشتری را در سبد خرید آنلاین دنبال می کنید.
این جستارهایSQL بر سفارشات و جداول سفارشات تأثیر می گذارد. کلاس DBTransaction شما فقط باید در صورتی اجازه تغییرات در پایگاه داده را بدهد که تمام نمایش داده ها بدون هیچ خطایی انجام شوند. در غیر این صورت ، خطایی دریافت خواهید کرد و هرگونه تغییر دوباره برگردانده میشود.
شما در حال ایجاد سفارش واحد برای مشتری JOHN DOE با شناسه مشتری برابر 1 هستید. سفارش مشتری دارای سه کالای مختلف با مقادیر متفاوت از جدول محصولات است. اسکریپت PHP شما اطلاعات سفارش مشتری را می گیرد و آن را وارد کلاس DBTransaction می کند.
فایل Order.php را ایجاد کنید:
⦁ $ sudo nano /var/www/html/orders.php
⦁
سپس کد زیر را به فایل اضافه کنید:
/var/www/html/orders.php
<?php

require(“DBTransaction.php”);

$db_host = “database_host”;
$db_name = “database_name”;
$db_user = “database_user”;
$db_password = “PASSWORD”;

$customer_id = 2;

$products[] = [
‘product_id’ => 1,
‘price’ => 25.50,
‘quantity’ => 1
];

$products[] = [
‘product_id’ => 2,
‘price’ => 13.90,
‘quantity’ => 3
];

$products[] = [
‘product_id’ => 3,
‘price’ => 45.30,
‘quantity’ => 2
];

$transaction = new DBTransaction($db_host, $db_user, $db_password, $db_name);

یک اسکریپت PHP ایجاد کرده اید که نمونه ای از کلاس DBTransaction را که در مرحله 2 ایجاد کردید ، مقداردهی اولیه می کند.
در این اسکریپت ، فایل DBTransaction.php را درج می کنید و کلاس DBTransaction را راه اندازی می نمایید. در مرحله بعد ، آرایه ای چند بعدی از کلیه کالاهایی را که مشتری از فروشگاه سفارش می دهد ، تهیه می کنید. همچنین برای شروع یک تراکنش از روش startTransaction () استفاده می کنید.
کد بعدی را اضافه کنید تا اسکریپت orders.php خود را به پایان برسانید:
/var/www/html/orders.php
. . .
$order_query = “insert into orders (order_id, customer_id, order_date, order_total) values(:order_id, :customer_id, :order_date, :order_total)”;
$product_query = “insert into orders_products (order_id, product_id, price, quantity) values(:order_id, :product_id, :price, :quantity)”;

$transaction->insertQuery($order_query, [
‘customer_id’ => $customer_id,
‘order_date’ => “2020-01-11”,
‘order_total’ => 157.8
]);

$order_id = $transaction->last_insert_id;

foreach ($products as $product) {
$transaction->insertQuery($product_query, [
‘order_id’ => $order_id,
‘product_id’ => $product[‘product_id’],
‘price’ => $product[‘price’],
‘quantity’ => $product[‘quantity’]
]);
}

$result = $transaction->submit();

if ($result) {
echo “Records successfully submitted”;
} else {
echo “There was an error.”;
}

با فشار دادن CTRL + X ، Y ، سپس enter فایل را ذخیره کرده و ببندید.
شما دستور را برای قرار دادن در جدول سفارشات از طریق روش insertTransaction آماده می کنید. پس از این ، مقدار مشخصه عمومی last_insert_id را از کلاس DBTransaction بازیابی می کنید و از آن به عنوان $ order_id استفاده می کنید.
اکنون که $order_id را دارید ، از شناسه منحصر به فرد برای درج موارد سفارش مشتری در جدول order_products استفاده می کنید.
سرانجام ، در صورت عدم وجود مشکل ، روش submitTransaction را برای ارائه کلیه سفارشات مشتری به بانک اطلاعاتی فراخوانی میکنید. در غیر اینصورت ، روش submitTransaction باعث بازگردانی تغییرات خواهد شد.
اکنون اسکریپت Order.php را در مرورگر خود اجرا کنید. موارد زیر را اجرا کنید و your-server-IP را با آدرس IP عمومی سرور مجازی خود جایگزین کنید:
http://your-server-IP/orders.php

تأیید صحت ارسال فایل با موفقیت را مشاهده خواهید کرد:

اسکریپت PHP شما مطابق آنچه انتظار می رود کار می کند و سفارش به همراه محصولات سفارش مرتبط با آن به صورت اتمی به بانک اطلاعاتی ارسال می شود.
شما فایل orders.php را در یک پنجره مرورگر اجرا کرده اید. اسکریپت کلاس DBTransaction را به کار گرفته و به نوبه خود جزئیات سفارشات را به پایگاه داده ارسال می کند. در مرحله بعد ، تأیید می کنید که سوابق در جداول بانک اطلاعاتی مرتبط ذخیره شده است.
مرحله 4 – تأیید ورودی ها به بانک اطلاعاتی شما
در این مرحله ، بررسی خواهید کرد که آیا تراکنشی که از پنجره مرورگر برای سفارش مشتری انجام شده است مطابق پیش بینی در جداول بانک اطلاعاتی ارسال شده است.
برای این کار ، دوباره وارد پایگاه داده MySQL شوید:
⦁ $ sudo mysql -u sample_user -p
⦁
برای ادامه رمز عبور sample_user را وارد کرده و ENTER را بزنید.
به پایگاه داده sample_storeسوییچ کنید:
⦁ Mysql> USE sample_store;
⦁
قبل از ادامه با تأیید خروجی زیر ، اطمینان حاصل کنید که بانک اطلاعات تغییر کرده است:
Output
Database Changed.

سپس دستور زیر را برای بازیابی سوابق از جدول سفارشات صادر کنید:
⦁ Mysql> SELECT * FROM orders;
⦁

با این کار خروجی زیر با جزئیات سفارش مشتری نمایش داده می شود:
Output
+———-+———————+————-+————-+
| order_id | order_date | customer_id | order_total |
+———-+———————+————-+————-+
| 1 | 2020-01-11 00:00:00 | 2 | 157.8 |
+———-+———————+————-+————-+
1 row in set (0.00 sec)

در مرحله بعد ، سوابق را از جدول order_products بازیابی کنید:
⦁ Mysql> SELECT * FROM orders_products;
⦁

با لیستی از محصولات موجود در سفارش مشتری ، خروجی مشابه زیر را مشاهده خواهید کرد:
Output
+——–+———-+————+——-+———-+
| ref_id | order_id | product_id | price | quantity |
+——–+———-+————+——-+———-+
| 1 | 1 | 1 | 25.5 | 1 |
| 2 | 1 | 2 | 13.9 | 3 |
| 3 | 1 | 3 | 45.3 | 2 |
+——–+———-+————+——-+———-+
3 rows in set (0.00 sec)

خروجی تأیید می کند که تراکنش در بانک اطلاعاتی ذخیره شده است و کلاس DBTransaction کمکی کلاس شما همانطور که انتظار می رود کار می کند.
نتیجه
در این راهنما از PHP PDO برای کار با تراکنش های MySQL استفاده کرده اید. اگرچه این مقاله قطعی در مورد طراحی یک نرم افزار تجارت الکترونیکی نیست ، اما نمونه ای برای استفاده از تراکنش های MySQL در برنامه های شما آورده است.
برای کسب اطلاعات بیشتر در مورد مدل MySQL ACID ، به راهنمای InnoDB و راهنمای مدل ACID از وب سایت رسمی MySQL مراجعه کنید. برای اطلاعات بیشتر در رابطه با آموزش ها ، مقاله ها و پرسش و پاسخ به صفحه محتوای MySQL ما مراجعه کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:Consistency, PDO PHP, Ubuntu

۰ نظر

behnam gol mohamadi

نصب Linux، Nginx، MariaDB،PHP در Debian 10

۶ مرداد۹۹

پشته نرم افزار LEMP گروهی از نرم افزارها است که می تواند برای ارائه صفحات وب پویا و برنامه های وب استفاده شود. نام “LEMP” مخفف 4 کلمه است: سیستم عامل Linux که یک سرور مجازی وب (E)Nginxدارد. داده های پس زمینه در یک پایگاه داده MariaDB ذخیره می شوند و پردازش پویا توسط PHP انجام می شود.
اگرچه این پشته نرم افزار به طور معمول شامل MySQL به عنوان سیستم مدیریت پایگاه داده است ، اما برخی توزیع های لینوکس – از جمله Debian – از MariaDB به عنوان جایگزینی برای MySQL استفاده می کنند.
در این راهنما ، یک پشته LEMP را روی یک سرور مجازی Debian 10 با استفاده از MariaDB به عنوان سیستم مدیریت پایگاه داده نصب خواهید کرد.
پیش نیازها
برای تکمیل این راهنما ، به دسترسی به یک سرور مجازی Debian 10 احتیاج دارید. این سرور مجازی باید دارای یک کاربر معمولی باشد که با امتیازات sudo پیکربندی شده و یک فایروال فعال با ufw داشته باشد. برای تنظیم این گزینه ، می توانید ستاپ اولیه سرور مجازی را با راهنمای Debian 10 دنبال کنید.
مرحله 1 – نصب سرور مجازی Nginx
به منظور ارائه پیج های وب سایت به بازدید کنندگان سایت خود ، قصد داریم از Nginx ، یک سرور مجازی وب محبوب استفاده کنیم که به دلیل عملکرد و پایداری کلی آن بسیار مشهور است.
تمام نرم افزاری که برای این روش از آن استفاده خواهید کرد ، مستقیماً از منابع بسته پیش فرض Debian وارد می شوند. این بدان معناست که می توانید از مجموعه مدیریت بسته apt برای تکمیل نصب استفاده کنید.
از آنجا که این اولین باری است که از apt استفاده می کنید ، باید با به روز کردن فهرست بسته محلی خود شروع کنید. سپس می توانید سرور مجازی را نصب کنید:
⦁ $ sudo apt update
⦁
⦁ $ sudo apt install nginx
در Debian 10 ، Nginx پیکربندی شده است تا نصب را شروع کند.
اگر فایروال ufw در حال اجراست ، باید به Nginx اجازه اتصالات دهید. باید محدودترین نمایه ای را فعال کنید که هنوز امکان ترافیک مورد نظر شما را فراهم می کند. از آنجایی که شما هنوز SSL را برای سرور مجازی خود پیکربندی نکرده اید ، اکنون باید اجازه ترافیک HTTP در درگاه 80 را بدهید.
می توانید این را با تایپ کردن دستور زیر فعال کنید:
⦁ sudo ufw allow ‘Nginx HTTP’
⦁

می توانید تغییر را با تایپ دستور زیر تایید کنید:
⦁ sudo ufw status
⦁

باید ترافیک HTTP مجاز در خروجی نمایش داده شده را مشاهده کنید:
Output
Status: active

To Action From
— —— —-
OpenSSH ALLOW Anywhere
Nginx HTTP ALLOW Anywhere
OpenSSH (v6) ALLOW Anywhere (v6)
Nginx HTTP (v6) ALLOW Anywhere (v6)

اکنون با دسترسی به نام دامنه سرور مجازی یا آدرس IP عمومی در مرورگر وب خود ، بررسی کنید که سرور مجازی در حال فعال بودن یا کار کردن است. اگر نام دامنه ای که به سرور مجازی شما اشاره کند ندارید و آدرس IP عمومی سرور مجازی خود را نمی دانید ، می توانید با وارد کردن یکی از موارد زیر در ترمینال خود آن را پیدا کنید:
⦁ ip addr show eth0 | grep inet | awk ‘{ print $2; }’ | sed ‘s/\/.*$//’
⦁

با این کار چند آدرس IP چاپ می شود. می توانید هر یک از آنها را به ترتیب در مرورگر وب خود امتحان کنید.
یکی از آدرسهای دریافت شده را در مرورگر وب خود تایپ کنید. باید شما را به صفحه فرود پیش فرض Nginx ببرد:
http://your_domain_or_IP

اگر صفحه فوق را می بینید ،Nginx را با موفقیت نصب کرده اید.
مرحله 2 – نصب MariaDB
اکنون که وب سرور مجازی خود را فعال و راه اندازی کرده اید ، باید سیستم پایگاه داده را نصب کنید تا بتوانید داده های سایت خود را ذخیره و مدیریت کنید.
در Debian 10 ، سرور مجازی ابربسته mysql ، که به طور سنتی برای نصب سرور مجازی MySQL استفاده می شد ، توسط سرور مجازی پیش فرض-mysql جایگزین شد. این metapackage مرجع MariaDB ، فورک انجمن سرور مجازی اصلی MySQL توسط Oracle است ، و در حال حاضر سرور مجازی پایگاه داده سازگار با MySQL است که در منابع مدیر بسته بسته های دبیان موجود است.
با این وجود ، برای سازگاری طولانی تر توصیه می شود که به جای استفاده از ابربسته ، MariaDB را با استفاده از بسته واقعی برنامه ، mariadb-server ، نصب کنید.
برای نصب این نرم افزار ، دستور زیر را اجرا کنید:
⦁ $ sudo apt install mariadb-server
⦁
پس از اتمام نصب ، توصیه می شود اسکریپت امنیتی را اجرا کنید که همراه با MariaDB از قبل نصب شده باشد. این اسکریپت برخی از تنظیمات پیش فرض ناامن را حذف کرده و دسترسی به سیستم پایگاه داده شما را خاموش می کند. اسکریپت تعاملی را با اجرای این دستور شروع کنید:
⦁ $ sudo mysql_secure_installation
⦁

این اسکریپت شما را با مجموعه ای از درخواست ها روبه رو میکند که می توانید در تنظیمات MariaDB خود تغییراتی ایجاد کنید. اولین اعلان از شما می خواهد رمز ورود ریشه داده فعلی را وارد کنید. این نباید با ریشه سیستم اشتباه گرفته شود. کاربر root بانک اطلاعاتی یک کاربر ادمین با امتیازات کامل نسبت به سیستم دیتابیس است. از آنجا که شما به تازگی MariaDB را نصب کرده اید و هنوز تغییری در پیکربندی ایجاد نکرده اید ، این گذرواژه خالی خواهد بود ، بنابراین کافی است سریعاً ENTER را فشار دهید.
اعلان بعدی از شما سؤال می کند که آیا می خواهید رمزعبور ریشه دیتابیس را تنظیم کنید یا خیر. از آنجا که MariaDB از یک روش تأیید هویت ویژه برای کاربر اصلی استفاده می کند که به طور معمول از استفاده از رمز عبور ایمن تر است ، دیگر نیازی به تنظیم آن ندارید. N را تایپ کرده و ENTER را فشار دهید.
از آنجا ، می توانید Y و سپس ENTER را فشار دهید تا پیش فرض برای همه سؤالات بعدی را بپذیرید. با این کار کاربران ناشناس و پایگاه داده آزمایش حذف می شوند ، ورود به سیستم از راه دور ریشه را غیرفعال می کنند و این قوانین جدید را بارگذاری می کنند تا MariaDB سریعاً به تغییراتی که شما انجام داده اید سازگار شود.
پس از اتمام کار ، با تایپ دستور زیر به کنسول MariaDB وارد شوید:
⦁ $ sudo mariadb
⦁
این کار اتصال به سرور مجازی MariaDB به عنوان ریشه کاربر پایگاه داده ادمین را انجام میدهد ، که با استفاده از sudo هنگام اجرای این دستور استنباط می شود. شما باید خروجی مانند این را مشاهده کنید:
Output
Welcome to the MariaDB monitor. Commands end with ; or \g.
Your MariaDB connection id is 74
Server version: 10.3.15-MariaDB-1 Debian 10

Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the current input statement.

MariaDB [(none)]>

توجه کنید که برای اتصال به عنوان کاربر اصلی نیازی به گذرواژه ندارید. در واقع به این دلیل کار می کند که روش احراز هویت پیش فرض برای کاربر ادمین MariaDB به جای پسورد، unix_socket است. اگر چه ممکن است در ابتدا شبیه یک مشکل امنیتی به نظر برسد ، باعث می شود سرور مجازی پایگاه داده ایمن تر شود زیرا تنها کاربرانی اجازه ورود به عنوان کاربر اصلی MariaDB را دارند که کاربران سیستم با امتیازات sudo هستند که از طریق کنسول یا برنامه ای با امتیازات مشابه ، وارد سیستم می شوند. از نظر عملی ، بدان معناست که شما قادر نخواهید بود از کاربر ریشه بانک اطلاعاتی ادمین برای اتصال به برنامه PHP خود استفاده کنید.
برای افزایش امنیت ، بهتر است برای هر بانک اطلاعاتی ، حسابهای کاربری اختصاصی با امتیازات گسترده تری تنظیم کنید ، به خصوص اگر قصد دارید چندین پایگاه داده را در سرور مجازی خود داشته باشید. برای نشان دادن چنین ستاپی ، یک پایگاه داده با نام example_database و کاربری با نام example_user ایجاد می کنیم ، اما می توانید این نام ها را با مقادیر مختلف جایگزین کنید.
برای ایجاد یک پایگاه داده جدید ، دستور زیر را از کنسول MariaDB خود اجرا کنید:
⦁ mariaDB [(none)]> CREATE DATABASE example_database;
⦁
اکنون می توانید یک کاربر جدید ایجاد کنید و به آنها در پایگاه داده سفارشی که اخیراً ایجاد کرده اید ، امتیاز اعطا کنید. دستور زیر رمزعبور کاربر را به عنوان password تعریف می کند ، اما شما باید این مقدار را با یک رمز عبور مطمئن با انتخاب خود جایگزین کنید.
⦁ mariaDB [(none)]> GRANT ALL ON example_database.* TO ‘example_user’@’localhost’ IDENTIFIED BY ‘password’ WITH GRANT OPTION;
⦁
این کار به کاربر example_user دسترسی کامل به بانک اطلاعاتی example_database می دهد ، در حالی که از ایجاد یا تغییر سایر پایگاه های داده روی سرور شما جلوگیری می کند.
برای اطمینان از ذخیره و در دسترس بودن آنها در جلسه کنونی ، امتیازات را فلاش کنید:
⦁ mariaDB [(none)]> FLUSH PRIVILEGES;
⦁
پس از این ، از پوسته MariaDB خارج شوید:
⦁ mariaDB [(none)]> exit
⦁
با ورود دوباره به کنسول MariaDB ، این بار با استفاده از اعتبار کاربر سفارشی می توانید آزمایش کنید که آیا کاربر جدید دارای مجوزهای مناسب است.
⦁ $ mariadb -u example_user -p
⦁
در این دستور ،به پرچم -p توجه کنید ، که باعث می شود رمز عبوری که هنگام ایجاد کاربر example_user ایجاد می کنید ، از شما خواسته شود. پس از ورود به کنسول MariaDB ، تأیید کنید که به بانک اطلاعاتی example_database دسترسی دارید:
⦁ mariaDB [(none)]> SHOW DATABASES;
⦁
این کار خروجی زیر را به شما می دهد:
Output
+——————–+
| Database |
+——————–+
| example_database |
| information_schema |
+——————–+
2 rows in set (0.000 sec)
برای خروج از پوسته MariaDB تایپ کنید:
⦁ mariaDB [(none)]> exit
⦁

در این مرحله ، سیستم پایگاه داده شما تنظیم شده است و می توانید به سراغ نصب PHP ، مؤلفه نهایی پشته LEMP بروید.
مرحله 3 – نصب PHP برای پردازش
شما Nginx را برای ارائه مطالب خود و MySQL برای ذخیره و مدیریت داده های خود نصب کرده اید. اکنون می توانید PHP را برای پردازش کد و تولید محتوای پویا برای سرور مجازی وب نصب کنید.
در حالی که Apache مترجم PHP را در هر درخواست تعبیه می کند ، Nginx به یک برنامه خارجی نیاز دارد تا پردازش PHP را انجام دهد و به عنوان پلی بین مفسر PHP و سرور مجازی وب عمل کند. این کار باعث می شود عملکرد کلی بهتر در اکثر وب سایتهای مبتنی بر PHP انجام شود ، اما به پیکربندی بیشتری نیاز دارد. شما باید php-fpm را که مخفف “مدیر فرآیند PHP fastCGI” است ، نصب کنید و به Nginx بگویید که درخواستهای PHP را برای پردازش به این نرم افزار ارسال کند. علاوه بر این ، به php-mysql ، یک ماژول PHP نیاز خواهید داشت که به PHP اجازه می دهد تا با بانکهای اطلاعاتی مبتنی بر MySQL ارتباط برقرار کند. بسته های اصلی PHP بصورت خودکار به عنوان متعلقات نصب می شوند.
برای نصب بسته های php-fpm و php-mysql ، دستور زیر را اجرا کنید:
⦁ $ sudo apt install php-fpm php-mysql
⦁
اکنون اجزای PHP شما نصب شده اند. در مرحله بعد ، Nginx را برای استفاده از آنها پیکربندی خواهید کرد.
مرحله 4 – پیکربندی Nginx برای استفاده از پردازنده PHP
هنگام استفاده از وب سرور مجازی Nginx ، می توانید از بلوک های سرور مجازی (مشابه میزبان های مجازی در Apache) برای دربرگیری جزئیات پیکربندی و میزبانی بیش از یک دامنه در یک سرور مجازی واحد استفاده کنید. در این راهنما ، ما از your_domain به عنوان نام دامنه به عنوان مثال استفاده خواهیم کرد. برای کسب اطلاعات بیشتر در مورد تنظیم نام دامنه با DigitalOcean ، به مقدمه ما در DigitalOcean DNS مراجعه کنید.
در Debian 10 ، Nginx دارای یک بلوک سرور مجازی به طور پیش فرض فعال شده است و پیکربندی شده تا اسناد را از یک دیرکتوری در / var / www / html ارائه دهد. اگرچه این یک سایت واحد به خوبی کار می کند ، اگر میزبان چندین سایت هستید ، ممکن است مدیریت آن دشوار شود. به جای اصلاح / var / www / html ، بیایید یک ساختار دایرکتوری را در / var / www برای وب سایت your_domain ایجاد کنیم ، و / var / www / html را در جای خود به عنوان دایرکتوری پیش فرض قرار دهیم که در صورتی که درخواست مشتری با هیچ سرویسی مطابقت نداشت ارائه شود.
دیرکتوری اصلی وب را برای your_domain به شرح زیر ایجاد کنید:
⦁ $ sudo mkdir /var/www/your_domain

در مرحله بعدی ، مالکیت دایرکتوری را به متغیر محیط USER اختصاص دهید ، که باید کاربر سیستم فعلی شما را ارجاع دهد:
⦁ $ sudo chown -R $USER:$USER /var/www/your_domain
⦁
سپس ، با استفاده از ویرایشگر خط فرمان مورد نظر خود ، یک فایل پیکربندی جدید را در دیرکتوری sites-available Nginx باز کنید. در اینجا ، ما از nano استفاده خواهیم کرد:
⦁ $ sudo nano /etc/nginx/sites-available/your_domain
⦁

با این کار یک فایل جدید خالی ایجاد می شود. در پیکربندی اسکلت زیر قرار دهید:
/etc/nginx/sites-available/your_domain
server {
listen 80;
listen [::]:80;

root /var/www/your_domain;
index index.php index.html index.htm;

server_name your_domain;

location / {
try_files $uri $uri/ =404;
}

location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php7.3-fpm.sock;
}
}

این یک پیکربندی پایه است که درگاه 80 را پیگیری می دهد و فایلهایی را از ریشه وب شما که ایجاد کرده اید ، ارائه می کند. فقط به درخواست های میزبان یا آدرس IP ارائه شده پس از server_name پاسخ می دهد ، و هر فایل خاتمه یافته به .php توسط php-fpm قبل از ارسال نتایج به کاربر توسط Nginx پردازش می شود.
وقتی ویرایش را انجام دادید ، فایل را ذخیره کنید و ببندید. اگر برای ایجاد فایل از نانو استفاده کرده اید ، این کار را با تایپ کردن CTRL + X و سپس y و ENTER برای تأیید انجام دهید.
پیکربندی خود را با پیوند دادن به فایل پیکربندی از دیرکتوری sites-enabled Nginx فعال کنید:
⦁ $ sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/
⦁

با این کار به Nginx گفته می شود دفعه بعدی که مجدد لود میشود از پیکربندی استفاده کند. می توانید پیکربندی خود را برای خطاهای نحوی با تایپ کردن دستور زیر تست کنید:
⦁ $ sudo nginx -t
⦁

در صورتی که خطایی گزارش شود ، به فایل پیکربندی خود بازگردید تا محتوای آن را قبل از ادامه مرور کنید.
هنگامی که آماده هستید ، Nginx را مجدد لود کنید تا تغییرات ایجاد شود:
⦁ $ sudo systemctl reload nginx
⦁
در مرحله بعد ، برای آزمایش پردازش PHP ، فایلی را در دیرکتوری جدید وب خود ایجاد خواهید کرد.
مرحله 5 – ایجاد یک فایل PHP برای آزمایش پیکربندی
اکنون پشته LEMP شما باید کاملاً تنظیم شود. شما می توانید آن را آزمایش کنید تا تأیید کنید که Nginx می تواند فایل های php را به درستی به پردازنده PHP خود واگذار کند.
می توانید این کار را با ایجاد یک فایل PHP تست شده در ریشه سند خود انجام دهید. فایل جدیدی به نام info.php را در ریشه سند خود در ویرایشگر متن خود باز کنید:
⦁ nano /var/www/your_domain/info.php
⦁

خطوط زیر را وارد فایل جدید کنید. این کد PHP معتبری است که اطلاعات مربوط به سرور مجازی شما را برمی گرداند:
/var/www/your_domain/info.php
<?php
phpinfo();
?>

پس از اتمام ، فایل را با تایپ کردن CTRL + X و سپس y و ENTER ذخیره کنید و ببندید تا تأیید شود.
اکنون می توانید با مراجعه به نام دامنه یا آدرس IP عمومی که در فایل پیکربندی Nginx خود تنظیم کرده اید و پس از آن /info.php وجود دارد، به این صفحه در مرورگر وب خود دسترسی پیدا کنید:
http://your_domain/info.php

یک صفحه وب حاوی اطلاعات دقیق در مورد سرور مجازی خود خواهید دید:

پس از بررسی اطلاعات مربوط به سرور مجازی PHP خود از طریق آن صفحه ، بهتر است فایل ایجاد شده را حذف کنید زیرا حاوی اطلاعات حساسی در مورد محیط PHP و سرور مجازی Debian شما است. برای حذف آن فایل می توانید از rm استفاده کنید:
⦁ $ rm /var/www/your_domain/info.php
⦁
در صورت نیاز بعداً می توانید این فایل را دوباره بازسازی کنید. در مرحله بعد ، اتصال بانک اطلاعاتی را از طرف PHP آزمایش خواهیم کرد.
مرحله 6 – آزمایش اتصال به بانک اطلاعاتی از PHP (اختیاری)
اگر می خواهید تست کنید که PHP قادر به اتصال به MariaDB و اجرای جستارهای پایگاه داده است ، می توانید یک جدول آزمایشی با داده های ساختگی و جستاری برای مطالب آن از یک اسکریپت PHP ایجاد کنید.
ابتدا با کاربر پایگاه داده ای که در مرحله 2 این راهنما ایجاد کرده اید به کنسول MariaDB متصل شوید:
⦁ $ mariadb -u example_user -p
⦁

یک جدول با نام todo_list ایجاد کنید. از کنسول MariaDB عبارت زیر را اجرا کنید:
CREATE TABLE example_database.todo_list (
item_id INT AUTO_INCREMENT,
content VARCHAR(255),
PRIMARY KEY(item_id)
);

اکنون ، چند ردیف از محتوا را در جدول آزمون وارد کنید. ممکن است بخواهید با استفاده از مقادیر مختلف دستور بعدی را چند بار تکرار کنید:
⦁ mariaDB [(none)]> INSERT INTO example_database.todo_list (content) VALUES (“My first important item”);
⦁

پس از تأیید اینکه داده های معتبری در جدول آزمون خود دارید ، می توانید از کنسول MariaDB خارج شوید:
⦁ mariaDB [(none)]> exit
⦁

اکنون می توانید اسکریپت PHP را ایجاد کنید که به MariaDB وصل شود و برای محتوای خود پرس و جو کنید. با استفاده از ویرایشگر مورد نظر خود ، یک فایل PHP جدید را در درییرکتو اصلی وب خود ایجاد کنید. ما برای این کار از نانو استفاده خواهیم کرد:
⦁ $ nano /var/www/your_domain/todo_list.php
⦁
محتوای زیر را به متن PHP خود اضافه کنید:
<?php
$user = “example_user”;
$password = “password”;
$database = “example_database”;
$table = “todo_list”;

try {
$db = new PDO(“mysql:host=localhost;dbname=$database”, $user, $password);
echo “<h2>TODO</h2><ol>”;
foreach($db->query(“SELECT content FROM $table”) as $row) {
echo “<li>” . $row[‘content’] . “</li>”;
}
echo “</ol>”;
} catch (PDOException $e) {
print “Error!: ” . $e->getMessage() . “<br/>”;
die();
}

پس از پایان ویرایش ، فایل را ذخیره کنید و ببندید.
اکنون می توانید با مراجعه به نام دامنه یا آدرس IP عمومی که در فایل پیکربندی Nginx خود تنظیم کرده اید و به /todo_list.php ختم میشود، به این صفحه در مرورگر وب خود دسترسی پیدا کنید:
http://your_domain/todo_list.php

باید صفحه ای مانند این را مشاهده کنید ، محتویاتی را که در جدول آزمایش خود وارد کرده اید نشان دهد:

این بدان معناست که محیط PHP شما آماده اتصال و تعامل با سرور مجازی MariaDB شماست.
نتیجه
در این راهنما ، شما با استفاده از Nginx به عنوان سرور مجازی وب ، یک پایه انعطاف پذیر برای ارائه وب سایت ها و برنامه های PHP به بازدید کنندگان خود ایجاد کرده اید. شما Nginx را تنظیم کرده اید تا بتوانید درخواست های PHP را از طریق php-fpm انجام دهید ، همچنین یک پایگاه داده MariaDB را برای ذخیره اطلاعات وب سایت خود تنظیم کرده اید.
برای بهبود بیشتر ستاپ فعلی ، می توانید Composer را برای وابستگی و مدیریت بسته بندی در PHP نصب کنید ، همچنین می توانید با استفاده از Let Encrypt یک گواهی OpenSSL را برای وب سایت خود نصب کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:Debian 10, LEMP, MariaDB, Nginx

۰ نظر

behnam gol mohamadi

پارامترهای پیش فرض در جاوا اسکریپت

۶ مرداد۹۹

در ECMAScript 2015 ، پارامترهای تابع پیش فرض به زبان JavaScript معرفی شدند. این پارامترها به توسعه دهندگان امکان میدهند که در صورت عدم ارائه آرگومان به آنها، یک تابع را با مقادیر پیش فرض مقدار اولیه بدهند. مقداردهی پارامترهای تابع به این روش باعث می شود توابع شما راحت تر خوانده شوند و کمتر دچار خطا شوند و رفتار پیش فرض توابعی شما را فراهم می کنند. این به شما کمک می کند از خطاهای ناشی از انتقال آرگومان های تعریف نشده و آبجکت های تخریب کننده ای که وجود ندارند، جلوگیری کنید.
در این مقاله ، تفاوت بین پارامترها و آرگومان ها را مرور خواهید کرد ، یاد می گیرید که چگونه از پارامترهای پیش فرض در توابع استفاده کنید ، روش های متفاوتی برای پشتیبانی از پارامترهای پیش فرض را مشاهده میکنید ، و یاد می گیرید که از چه نوع مقادیر و عباراتی می توان به عنوان پارامترهای پیش فرض استفاده کرد. همچنین نمونه هایی را میبینید که نشان می دهد پارامترهای پیش فرض در JavaScript چگونه کار می کنند.
آرگومان ها و پارامترها
قبل از توضیح پارامترهای پیش فرض تابع ، مهم است بدانیم که پارامترها به طور پیش فرض در چه می توانند باشند. به همین دلیل ، ابتدا تفاوت بین آرگومان ها و پارامترها را در یک تابع بررسی خواهیم کرد. اگر می خواهید در مورد این تمایز اطلاعات بیشتری کسب کنید ، مقاله قبلی ما را در مجموعه JavaScript با عنوان چگونه می توان توابع را در JavaScript تعریف کرد ، بررسی کنید.
در بلوک کد زیر ، تابعی را ایجاد می کنید که مکعب یک عدد معین را ، به صورت x تعریف می کند:
// Define a function to cube a number
function cube(x) {
return x * x * x
}

متغیر x در این مثال یک پارامتر است – یک متغیر نامگذاری شده که به یک تابع منتقل می شود. یک پارامتر همیشه باید در یک متغیر باشد و هرگز نباید مقدار مستقیم داشته باشد.
اکنون به این بلوک کد بعدی نگاهی بیاندازید که تابع cube را که تازه ایجاد کرده اید فراخوانی میکند:
// Invoke cube function
cube(10)

خروجی زیر را ارائه می دهد:
Output
1000
در این حالت ، 10 یک آرگومان است – مقداری که هنگام فراخوانی به یک تابع منتقل می شود. اغلب این مقدار در یک متغیر نیز موجود خواهد بود ، مانند این مثال بعدی:
// Assign a number to a variable
const number = 10

// Invoke cube function
cube(number)

این ، همان نتیجه را ارائه خواهد داد:
Output
1000

اگر آرگومانی را به تابعی منتقل نکنید ، تابع به طور ضمنی از undefined به عنوان مقدار استفاده می کند:
// Invoke the cube function without passing an argument
cube()

این نتیجه را به همراه دارد:
Output
NaN

در این حالت ، cube() در تلاش است تا مقدار undefined * undefined * undefined را محاسبه کند ، که منجر به NaN یا ” not a number” می شود. برای اطلاعات بیشتر در این مورد ، به بخش فهم انواع داده ها در JavaScript نگاهی بیندازید.
این رفتار خودکار بعضی اوقات می تواند مشکل ساز باشد. در بعضی موارد ، ممکن است بخواهید پارامتر مقدار داشته باشد حتی اگر هیچ آرگومانی به تابع منتقل نشده باشد. اینجاست که ویژگی پارامترهای پیش فرض در دسترس است ، موضوعی که در بخش بعدی آن را پوشش می دهیم.
دستور پارامتر پیش فرض
با اضافه کردن پارامترهای پیش فرض در ES2015 ، اکنون می توانید یک مقدار پیش فرض را به هر پارامتر اختصاص دهید ، که در صورت عدم وجود آرگومان ، تابع از آنها به جای undefined استفاده می کند. در این بخش ابتدا نحوه انجام این کار به صورت دستی به شما نشان داده می شود و سپس با تعیین پارامترهای پیش فرض شما را راهنمایی می کند.
بدون پارامترهای پیش فرض ، برای تنظیم مقادیر پیش فرض ، باید صریحاً مقادیر undefined را چک کنید ، همانطور که در این مثال نشان داده شده است:
// Check for undefined manually
function cube(x) {
if (typeof x === ‘undefined’) {
x = 5
}

return x * x * x
}

cube()

این از یک عبارت شرطی برای بررسی اینکه آیا مقدار به طور خودکار به عنوان undefined ارائه شده است ، استفاده میکند و سپس مقدار x را برابر 5 تعیین می کند. منجر به خروجی زیر می شود:
Output
125

در مقابل ، استفاده از پارامترهای پیش فرض ، هدف مشابهی را با کد بسیار کمتری به دست میدهد. با اختصاص دادن آن به اپراتور واگذاری برابری (=) ، همانطور که در اینجا هایلایت شده است ، می توانید مقدار پیش فرض را در cube تنظیم کنید.
// Define a cube function with a default value
function cube(x = 5) {
return x * x * x
}

اکنون وقتی تابع cube بدون آرگومان فراخوانی می شود ، 5 را به x اختصاص می دهد و به جای NaN مقدار محاسبه شده را برمی گرداند:
// Invoke cube function without an argument
cube()
Copy
Output
125

وقتی آرگومان وارد میشود ، همچنان به صورت در نظر گرفته شده کار میکند و مقدار پیش فرض را نادیده میگیرد:
// Invoke cube function with an argument
cube(2)
Copy
Output
8

با این وجود ، یک نکته مهم که باید به آن توجه داشته باشید اینست که مقدار پارامتر پیش فرض همچنین روی یک undefined رونویسی میشود و به عنوان یک آرگومان برای یک تابع ، همانطور که در اینجا نشان داده می شود ، وارد میشود.
// Invoke cube function with undefined
cube(undefined)

مقدار x برابر با 5 را ارائه می دهد:
Output
125

در این حالت ، مقادیر پارامتر پیش فرض محاسبه می شوند ، و مقدار undefined مشخصی آنها را باطل نمیکند.
اکنون که از ترکیب پایه پارامترهای پیش فرض اطلاع دارید ، در بخش بعدی نحوه کار پارامترهای پیش فرض با انواع مختلف داده ها نشان داده خواهد شد.
انواع داده های پیش فرض پارامتر
هر مقدار اولیه یا آبجکت می تواند به عنوان مقدار پارامتر پیش فرض استفاده شود. در این بخش خواهید دید که چگونه این انعطاف پذیری روش های استفاده از پارامترهای پیش فرض را افزایش می دهد.
ابتدا پارامترها را با استفاده از یک عدد ، رشته ، عدد بولی ، شی ، آرایه و مقدار null به عنوان یک مقدار پیش فرض تنظیم کنید. در این مثال از ترکیب تابع فلش استفاده می شود:
// Create functions with a default value for each data type
const defaultNumber = (number = 42) => console.log(number)
const defaultString = (string = ‘Shark’) => console.log(string)
const defaultBoolean = (boolean = true) => console.log(boolean)
const defaultObject = (object = { id: 7 }) => console.log(object)
const defaultArray = (array = [1, 2, 3]) => console.log(array)
const defaultNull = (nullValue = null) => console.log(nullValue)

وقتی این توابع بدون پارامتر فراخوانی شوند ، همه از مقادیر پیش فرض استفاده می کنند:
// Invoke each function
defaultNumber()
defaultString()
defaultBoolean()
defaultObject()
defaultArray()
defaultNull()
Copy
Output
42
“Shark”
true
{id: 7}
(3) [1, 2, 3]
null

توجه داشته باشید که هر آبجکت ایجاد شده با هر بار فراخوانی تابع در یک پارامتر پیش فرض ایجاد می شود. یکی از موارد استفاده رایج برای پارامترهای پیش فرض استفاده از این رفتار برای به دست آوردن مقادیر خارج از یک شی است. اگر سعی کنید تجزیه کنید یا به مقداری از شیئی که وجود ندارد دسترسی پیدا کنید ، خطایی نمایش داده میشود. با این حال ، اگر پارامتر پیش فرض یک شی خالی باشد ، به جای ایجاد خطا ، مقادیر undefined را به شما می دهد
// Define a settings function with a default object
function settings(options = {}) {
const { theme, debug } = options

// Do something with settings
}

با این کار از خطای ناشی از تخریب آبجکت هایی که وجود ندارند، جلوگیری می شود.
اکنون که مشاهده کرده اید که چگونه پارامترهای پیش فرض با انواع داده های مختلف کار می کنند ، در بخش بعدی نحوه کار با چندین پارامتر پیش فرض توضیح داده می شود.
استفاده از چندین پارامتر پیش فرض
می توانید تا جایی که میخواهید از پارامترهای پیش فرض در یک تابع استفاده کنید. در این بخش نحوه انجام این کار و نحوه استفاده از آن برای دستکاری DOM در یک مثال در دنیای واقعی به شما نشان داده خواهد شد.
ابتدا یک تابع sum () را با چند پارامتر پیش فرض اعلان کنید:
// Define a function to add two values
function sum(a = 1, b = 2) {
return a + b
}

sum()

منجر به محاسبه پیش فرض زیر می شود:
Output
3

علاوه بر این ، مقدار مورد استفاده در یک پارامتر را می توان در هر پارامتر پیش فرض بعدی ، از چپ به راست استفاده کرد. به عنوان مثال ، این تابع createUser یک کاربر userObj را به عنوان سومین پارامتر ایجاد می کند ، و تمام کاری که خود تابع انجام می دهد بازگشت userObj با دو پارامتر اول است:
// Define a function to create a user object using parameters
function createUser(name, rank, userObj = { name, rank }) {
return userObj
}

// Create user
const user = createUser(‘Jean-Luc Picard’, ‘Captain’)

اگر user را در اینجا فراخوانی کنید ، موارد زیر را دریافت خواهید کرد:
Output
{name: “Jean-Luc Picard”, rank: “Captain”}

معمولاً توصیه می شود تمام پارامترهای پیش فرض را در انتهای لیستی از پارامترها قرار دهید تا بتوانید به راحتی مقادیر اختیاری را کنار بگذارید. اگر ابتدا از یک پارامتر پیش فرض استفاده می کنید ، برای استفاده از مقدار پیش فرض باید صریحا undefined را وارد کنید.
در اینجا مثالی با پارامتر پیش فرض در ابتدای لیست آورده شده است:
// Define a function with a default parameter at the start of the list
function defaultFirst(a = 1, b) {
return a + b
}

هنگام فراخوانی این تابع ، باید defaultFirst() را با دو آرگومان فراخوانی کنید:
defaultFirst(undefined, 2)
Copy
خروجی زیر را نشان می دهد:
Output
3

در اینجا مثالی با پارامتر پیش فرض در انتهای لیست آورده شده است:
// Define a function with a default parameter at the end of the list
function defaultLast(a, b = 1) {
return a + b
}

defaultLast(2)

همان مقدار را نشان می دهد:
Output
3

هر دو تابع نتیجه یکسانی دارند ، اما تابع دارای مقدار پیش فرض ، امکان فراخوانی بسیار شفاف تر تابع را فراهم می کند.
برای مثال در دنیای واقعی ، تابعی مطرح شده است که یک عنصر DOM را ایجاد می کند و یک برچسب متن و کلاس هایی را در صورت وجود، اضافه می کند.
// Define function to create an element
function createNewElement(tag, text, classNames = []) {
const el = document.createElement(tag)
el.textContent = text

classNames.forEach(className => {
el.classList.add(className)
})

return el
}

می توانید با چند کلاس به صورت آرایه این تابع را فراخوانی کنید:
const greeting = createNewElement(‘p’, ‘Hello!’, [‘greeting’, ‘active’])
Copy

فراخوان greeting ، مقدار زیر را می دهد:
Output
<p class=”greeting active”>Hello!</p>

اما اگر آرایه classNames را از فراخوانی تابع خارج کنید ، باز هم کار خواهد کرد.
const greeting2 = createNewElement(‘p’, ‘Hello!’)
Copy

greeting2 اکنون دارای مقدار زیر است:
Output
<p>Hello!</p>

در این مثال ، forEach () می تواند بدون مشکل در یک آرایه خالی استفاده شود. اگر آن آرایه خالی در پارامتر پیش فرض تنظیم نشده باشد ، خطای زیر را دریافت می کنید:
Output
VM2673:5 Uncaught TypeError: Cannot read property ‘forEach’ of undefined
at createNewElement (<anonymous>:5:14)
at <anonymous>:12:18

اکنون که دیدید چگونه پارامترهای پیش فرض چندگانه می توانند تعامل داشته باشند ، می توانید به بخش بعدی بروید تا ببینید که چگونه فراخوانی های تابع به عنوان پارامترهای پیش فرض کار می کنند.
فراخوانی تابع به عنوان پارامترهای پیش فرض
علاوه بر مقادیر اولیه و آبجکت ها ، نتیجه فراخوانی یک تابع می تواند به عنوان یک پارامتر پیش فرض مورد استفاده قرار گیرد.
در این بلوک کد ، یک تابع ایجاد می کنید تا یک عدد تصادفی را برگردانید ، و سپس از یک نتیجه به عنوان مقدار پارامتر پیش فرض در یک تابع cube استفاده کنید:
// Define a function to return a random number from 1 to 10
function getRandomNumber() {
return Math.floor(Math.random() * 10)
}

// Use the random number function as a default parameter for the cube function
function cube(x = getRandomNumber()) {
return x * x * x
}

اکنون فراخوانی تابع cube بدون پارامتر در هر بار فراخوانی ، نتایج بالقوه متفاوتی خواهد داشت:
// Invoke cube function twice for two potentially different results
cube()
cube()

خروجی این فراخوانی های تابع متفاوت خواهد بود:
Output
512
64

حتی می توانید مانند از روش های داخلی موجود در آبجکت Math استفاده کنید و از مقدار برگشتی در یک فراخوانی تابع به عنوان پارامتر در یک تابع دیگر استفاده کنید.
در مثال زیر یک عدد تصادفی به x اختصاص داده می شود که به عنوان پارامتر در تابع cube که ایجاد کردید استفاده می شود. سپس پارامتر y ریشه مکعب عدد را محاسبه میکند و بررسی می نماید که آیا x و y برابر هستند:
// Assign a random number to x
// Assign the cube root of the result of the cube function and x to y
function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
return x === y
}

doesXEqualY()

خروجی زیر را نشان می دهد:
Output
true

حتی یک پارامتر پیش فرض می تواند یک تعریف تابع باشد ، همانطور که در این مثال مشاهده می شود ، که یک پارامتر را به عنوان تابع داخلی تعریف می کند و فراخوانی تابع parameter را برمی گرداند:
// Define a function with a default parameter that is an anonymous function
function outer(
parameter = function inner() {
return 100
}
) {
return parameter()
}

// Invoke outer function
outer()
Copy
Output
100

این تابع داخلی هر زمان که تابع خارجی فراخوانی شود ، از ابتدا ایجاد می شود.
نتیجه
در این مقاله آموختید که پارامترهای تابع پیش فرض چیست و استفاده از آنها چگونه است. اکنون می توانید از پارامترهای پیش فرض برای کمک به شفافیت و خوانایی توابع تان استفاده کنید. همچنین می توانید اشیاء و آرایه های خالی را به پارامترها اختصاص دهید تا در هنگام مواجهه با موقعیت هایی مانند بازیابی مقادیر از یک شی یا حلقه زدن در یک آرایه ، پیچیدگی و خطوط کد را کاهش دهید.
اگر می خواهید در مورد جاوا اسکریپت بیشتر بدانید ، از صفحه اصلی مجموعه درجاوااسکریپت بازدید کنید ، یا مقاله های مربوط به توسعه back-end ما را در مورد چگونگی کدنویسی در Node.js جستجو کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

پارامترهای پیش فرض در جاوا اسکریپت – اجرای چندین نسخه PHP بر روی یک سرور Debian 10

نحوه راه اندازی یک پروژه React با برنامه React – نصب و ایمن سازی phpMyAdmin در اوبونتو 18

پیکربندی یک تایید اعتبار مجاز(CA) در CentOS 8 – تنظیم برنامه Node.js برای تولید در CentOS 7

نصب MariaDB در اوبونتو 18.04 – ایمن کردن Apache با Let’s Encrypt در Debian 10

نحوه نصب Node.js در CentOS 8 – بازنویسی URL را با mod_rewrite برای Apache در Debian 10

راه اندازی فایروال با استفاده از firewalld در CentOS 8 – نصب وب سرور Apache در Debian 10

اضافه کردن و حذف کاربران در CentOS 8 – نصب Apache Tomcat 9 در Debian 10

نصب و استفاده از PostgreSQL در CentOS 8 – راه اندازی سرور اولیه با Debian 10

نصب MariaDB در CentOS 8 – چگونه با JSX عناصر واقعی ایجاد کنیم

نصب و پیکربندی VNC در Debian 10 – استفاده از سرور از راه دور Docker

نصب و ایمن سازی Grafana در اوبونتو 18 – نحوه نصب Git در CentOS 8

نصب Git در Debian 10 – نصب و پیکربندی Zabbix برای ردیابی ایمن سرورهای

نحوه نصب Node.js در Debian 10 – نصب وب سرور Apache در CentOS 7

نحوه نصب Webmin در Debian 10 – نصب و پیکربندی Zabbix برای ردیابی ایمن سرور

نصب وردپرس با بانک اطلاعاتی در اوبونتو – ساخت و استقرار سرور GraphQL با Node.js و MongoDB

نصب پایتون 3 و تنظیم نویسی محلی macOS – نصب و ایمن سازی phpMyAdmin با Nginx در سرور

نصب Nagios 4 و نظارت بر سرور اوبونتو 18 – نصب Python 3 و تنظیم یک محیط برنامه نویسی

نحوه نصب R بر روی Debian 10 – راه اندازی سرور Prisma روی اوبونتو 18.04

نصب و پیکربندی Laravel با LEMP در اوبونتو 18 – نصب و پیکربندی pgAdmin 4 در Server Mode

نصب Python 3 و تنظیم برنامه نویسی CentOS 8 – نصب Jitsi Meet در Ubuntu 18.04

کلمات کلیدی خرید سرور

برچسب‌ها:ECMAScript 2015, JavaScript

۰ نظر

behnam gol mohamadi

نحوه راه اندازی یک پروژه React با برنامه React

۶ مرداد۹۹

React یک چارچوب محبوب JavaScript برای ایجاد برنامه های front-end است. در ابتدا توسط فیس بوک ایجاد شد و این امکان را فراهم کرده است که توسعه دهندگان بتوانند برنامه های سریع را با استفاده از یک الگوی برنامه نویسی بصری ایجاد کنند که جاوا اسکریپت را با یک دستور مشابه HTML معروف به JSX مرتبط می کند.
شروع یک پروژه React جدید ، یک فرآیند پیچیده و چند مرحله ای بود که شامل تنظیم یک سیستم ساخت ، ترانسپایلر کد برای تبدیل ترکیب مدرن به کدی که توسط همه مرورگرها قابل خواندن باشد و یک ساختار دایرکتوری پایه بود. اما اکنون ، ایجاد برنامه React شامل تمام بسته های JavaScript برای اجرای یک پروژه React از جمله تعویض کد ، لایه بندی اولیه ، آزمایش و سیستم ساخت می باشد. همچنین شامل یک سرور مجازی با hot reloading است که با ایجاد تغییرات در کد ، صفحه شما را ریفرش می کند. در نهایت ، ساختاری برای دایرکتوری ها و مؤلفه های شما ایجاد می کند ، بنابراین می توانید فقط در چند دقیقه وارد برنامه نویسی شوید و شروع به کدگذاری کنید.
به عبارت دیگر ، لازم نیست نگران پیکربندی یک سیستم ساخت مانند Webpack باشید. لازم نیست که Babel را تنظیم کنید تا کد شما را تغییر دهد تا از مرورگر متقابل استفاده شود. لازم نیست نگران بسیاری از سیستمهای پیچیده و پیشرفته توسعه مقدماتی مدرن باشید. می توانید نوشتن کد React را با حداقل آماده سازی شروع کنید.
در پایان این آموزش ، برنامه React به اجرا در می اید و می توانید به عنوان پایه ای برای هر برنامه بعدی استفاده کنید. اولین تغییرات خود را در کد React ، به روز کردن سبک ها و راه اندازی ساختار برای ایجاد نسخه کاملاً کوچک شده از برنامه خود انجام می دهید. همچنین می توانید از سرور مجازی ی با hot reloading استفاده کنید تا بازخورد فوری به شما بدهد و بخش هایی از یک پروژه React را عمقی جستجو کنید. سرانجام ، شروع به نوشتن مؤلفه های سفارشی و ایجاد ساختاری می کنید که می تواند با پروژه شما رشد کند و سازگار شود.
پیش نیازها
برای دنبال کردن این آموزش ، به موارد زیر نیاز دارید:
⦁ Node.js نسخه 10.16.0 که بر روی کامپیوتر شما نصب شده باشد. برای نصب این برنامه در macOS یا Ubuntu 18.04 ، مراحل نحوه نصب Node.js و ایجاد محیط توسعه محلی را در macOS یا نصب با استفاده از یک بخش PPA در آموزش نحوه نصب Node.js روی اوبونتو 18.04 را دنبال کنید.
⦁ همچنین به داشتن درک پایه از JavaScript نیاز خواهید کرد ، که می توانید در مجموعه آموزش های کد نویسی در جاوااسکریپت بیابید و همچنین دانش پایه در HTML و CSS کک کننده خواهد بود.
مرحله 1 – ایجاد یک پروژه جدید با برنامه Create React
در این مرحله ، شما با استفاده از مدیر بسته npm یک برنامه جدید را برای اجرای یک اسکریپت از راه دور ایجاد خواهید کرد. اسکریپت فایل های لازم را در یک فهرست جدید کپی کرده و تمام متعلقات را نصب می کند.
پس از نصب Node ، یک برنامه مدیریت بسته نیز به نام npm نصب کرده اید. npm بسته های JavaScript را در پروژه شما نصب می کند و همچنین جزئیات مربوط به پروژه را پیگیری می کند. اگر می خواهید درباره npm اطلاعات بیشتری کسب کنید ، به آموزش نحوه استفاده از ماژول های Node.js با npm و pack.json ما نگاهی بیندازید.
npm همچنین شامل ابزاری به نام npx است که بسته های قابل اجرا را راه اندازی خواهد کرد. این بدان معنی است که شما بدون دانلود پروژه ، برنامه Creat React App را اجرا خواهید کرد.
بسته اجرایی نصب create-react-app را در دایرکتوری که مشخص کرده اید اجرا می کند. این کار با ساختن یک پروژه جدید در یک دایرکتوری آغاز می شود که در این جا digital-ocean-tutorial است. مجدداً ، لازم نیست این دایرکتوری از قبل وجود داشته باشد. بسته اجرایی آن را برای شما ایجاد می کند. اسکریپت همچنین npm install را درون دایرکتوری پروژه اجرا می کند ، که هرگونه متعلقات اضافی را دانلود می کند.
برای نصب پروژه پایه ، دستور زیر را اجرا کنید:
⦁ $ npx create-react-app digital-ocean-tutorial
⦁
این دستور یک فرایند ساخت را شروع می کند که کد پایه را به همراه تعدادی متعلقات دانلود می کند.
با پایان یافتن اسکریپت ، پیام موفقیت آمیز بودن را مشاهده خواهید کرد که می گوید:
Output
…
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd digital-ocean-tutorial
npm start

Happy hacking!

your_file_path مسیر فعلی شما خواهد بود. اگر کاربر macOS باشید ، چیزی شبیه / Users / your_username خواهد بود. اگر در سرور مجازی اوبونتو هستید ، چیزی مانند / home / your_username میگوید.
همچنین لیستی از دستورات npm را مشاهده خواهید کرد که به شما امکان می دهد برنامه خود را اجرا کنید، بسازید ، راه اندازی و آزمایش کنید. در بخش بعدی این موارد را بیشتر مطالعه خواهید کرد.
توجه: یک مدیر بسته دیگر برای JavaScript با نام yarn وجود دارد. توسط فیس بوک پشتیبانی میشود و بسیاری از موارد مشابه npm را انجام می دهد. در اصل ، yarn عملکرد جدیدی مانند فایل های قفل را ارائه می داد ، اما اکنون این موارد در npm نیز اجرا می شوند. yarn همچنین شامل چند ویژگی دیگر مانند ذخیره سازی آفلاین است. تفاوت های بیشتری را می توان در مستندات yarn مشاهده کرد.
اگر قبلاً yarn را بر روی سیستم خود نصب کرده باشید ، لیستی از دستورات yarn مانند yarn start را مشاهده میکنید که مانند آن در دستورات npm کار می کند. حتی اگر yarn نصب شده باشد می توانید دستورات npm را اجرا کنید. اگر yarn را ترجیح می دهید ، فقط در هر دستور بعدی npm را با yarn جایگزین کنید. نتایج همان خواهد بود.
اکنون پروژه شما در یک دیرکتوری جدید تنظیم شده است. به دیرکتوری جدید بروید:
⦁ $ cd digital-ocean-tutorial
⦁
اکنون در ریشه پروژه خود هستید. در این مرحله ، شما یک پروژه جدید ایجاد کرده اید و تمام متعلقات را اضافه کرده اید. اما هیچ اقدامی برای اجرای این برنامه نکرده اید. در بخش بعدی ، اسکریپت های سفارشی را برای ساخت و آزمایش پروژه اجرا خواهید کرد.
مرحله 2 – استفاده از react-scripts
در این مرحله با react-scripts های مختلف که با repo نصب شده اند آشنا می شوید. ابتدا اسکریپت آزمایشی را برای اجرای کد تست اجرا خواهید کرد. سپس اسکریپت build را اجرا می کنید تا نسخه مینی شده ایجاد کنید. در آخر ، خواهید دید که چگونه اسکریپت eject می تواند کنترل کاملی بر شخصی سازی انجام دهد.
اکنون که در دیرکتوری پروژه هستید ، به اطراف خود نگاهی بیندازید. می توانید کل دایرکتوری را در ویرایشگر متن خود باز کنید ، یا اگر در ترمینال هستید می توانید فایل ها را با دستور زیر لیست کنید:
⦁ $ ls -a
⦁
پرچم -a تضمین می کند که خروجی شامل فایل های مخفی نیز می شود.
در هر صورت ، ساختاری مانند این را خواهید دید:
Output
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

بیایید اینها را یکی یکی توضیح دهیم:
⦁ node_modules / حاوی تمام کتابخانه های جاوا اسکریپت خارجی است که توسط برنامه استفاده می شود. به ندرت نیاز به باز کردن آن خواهید داشت.
⦁ دایرکتوری public/ حاوی برخی از فایلهای HTML پایه ، JSON و تصویر است. اینها ریشه های پروژه شما هستند. در مرحله 4 فرصتی خواهید داشت که بیشتر در مورد آنها تحقیق کنید.
⦁ دایرکتوری src / شامل کد React JavaScript برای پروژه شما می باشد. بیشتر کارهایی که انجام می دهید در این دیرکتوری قرار می گیرند. این دیرکتوری را با جزئیات در مرحله 5 جستجو خواهید کرد.
⦁ فایل gitignore شامل برخی از دایرکتوری ها و فایل های پیش فرض است که از کنترل منبع شما استفاده نمی کنند ، مانند دیرکتوی node_modules. موارد نادیده گرفته شده به دایرکتوری های بزرگتر یا فایل هایی وارد می شوند که در کنترل منبع به آنها نیازی نخواهید داشت. همچنین برخی از دیرکتوری هایی را ایجاد خواهید کرد که با برخی از اسکریپت های React ایجاد خواهید کرد.
⦁ README.md یک فایل علامت گذاری است که شامل اطلاعات مفیدی در مورد Create React Appمانند خلاصه ای از دستورات و پیوندها به پیکربندی پیشرفته میباشد. در حال حاضر ، بهتر است فایل README.md را همانطور که می بینید ، رها کنید. با پیشرفت پروژه خود ، اطلاعات پیش فرض را با اطلاعات دقیق تر در مورد پروژه خود جایگزین خواهید کرد.
دو فایل آخر توسط مدیر بسته شما استفاده می شود. هنگامی که دستور npx اولیه را اجرا کردید ، پروژه پایه را ایجاد کردید ، اما متعلقاتی اضافی را نیز نصب کردید. هنگامی که متعلقات را نصب کردید ، یک فایل pack-lock.json ایجاد کردید. این فایل توسط npm استفاده می شود تا اطمینان حاصل شود که بسته ها با نسخه های دقیق مطابقت دارند. به این ترتیب اگر شخص دیگری پروژه شما را نصب کند ، می توانید اطمینان حاصل کنید که آنها متعلقاتی یکسانی دارند. از آنجا که این فایل به طور خودکار ایجاد می شود ، به ندرت این فایل را مستقیماً ویرایش می کنید.
آخرین فایل یک pack.json است. شامل ابرداده های مربوط به پروژه شما مانند عنوان ، شماره نسخه و متعلقات است. این برنامه همچنین حاوی اسکریپت هایی است که می توانید برای اجرای پروژه خود استفاده کنید.
فایل pack.json را در ویرایشگر متن مورد علاقه خود باز کنید:
⦁ $ nano package.json
⦁
با باز کردن فایل ، یک شیء JSON را مشاهده می کنید که شامل تمام ابرداده ها است. اگر به آبجکت scripts نگاه کنید ، چهار اسکریپت مختلف را پیدا خواهید کرد: start, build, test, و eject
این اسکریپت ها به ترتیب اهمیت فهرست شده اند. اسکریپت توسعه محلی را شروع می کند. در مرحله بعدی به آن خواهید رسید. اسکریپت دوم پروژه شما را می سازد. شما این کار را با جزئیات مرحله 4 انجام میدهید ، اما ارزش آن را دارد که اکنون آن را اجرا کنید.
اسکریپت build
برای اجرای هر اسکریپت npm ، فقط کافی است npm run script_name را در ترمینال خود تایپ کنید. چند اسکریپت ویژه وجود دارد که می توانید قسمت اجرای دستور را حذف کنید ، اما اجرای کامل فرمان همیشه خوب است. برای اجرای اسکریپت build ، موارد زیر را در ترمینال خود تایپ کنید:
⦁ $ npm run build
بلافاصله پیام زیر را مشاهده خواهید کرد:
Output
> digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial
> react-scripts build

Creating an optimized production build…
…

این به شما می گوید که Create React App در حال کامپایل کد شما به یک بسته نرم افزاری قابل استفاده است.
پس از اتمام ، خروجی زیر را مشاهده خواهید کرد:
Output
…
Compiled successfully.

File sizes after gzip:

39.85 KB build/static/js/9999.chunk.js
780 B build/static/js/runtime-main.99999.js
616 B build/static/js/main.9999.chunk.js
556 B build/static/css/main.9999.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

“homepage” : “http://myname.github.io/myapp”,

The build folder is ready to be deployed.
You may serve it with a static server:

serve -s build

Find out more about deployment here:

bit.ly/CRA-deploy

محتویات پروژه را لیست کنید و برخی از دیرکتوری های جدید را مشاهده خواهید کرد:
⦁ $ ls -a
⦁
Output
build/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

اکنون دایرکتوری build را دارید. اگر فایل .gitignore را باز کردید ، ممکن است متوجه شده باشید که دیرکتوری build توسط git نادیده گرفته می شود. به این دلیل است که دیرکتوری build فقط یک نسخه کوچک شده و بهینه شده از فایل های دیگر است. دیگر نیازی به استفاده از کنترل نسخه نیست زیرا همیشه می توانید دستور build را اجرا کنید. بعداً خروجی را بیشتر جستجو خواهید کرد. در حال حاضر ، زمان آن رسیده است که به اسکریپت آزمون بروید.
اسکریپت test
اسکریپت test یکی از آن اسکریپت های ویژه ای است که نیازی به کلمه کلیدی run ندارد ، اما حتی اگر آن را نیز بگنجانید کار می کند. این اسکریپت یک اجرا کننده آزمایشی به نام Jest را راه اندازی می کند. اجرا کننده آزمایشی پروژه شما را برای هر فایلی با پسوند. Spec.js یا .test.js جستجو می کند ، سپس آن فایل ها را اجرا می کند.
برای اجرای اسکریپت test ، دستور زیر را تایپ کنید:
⦁ $ npm test
⦁
پس از اجرای این اسکریپت ، ترمینال شما خروجی مجموعه آزمون را خواهد داشت و سریع ترمینال از بین می رود. چیزی شبیه به این خواهد بود:
Output
PASS src/App.test.js
✓ renders learn react link (67ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.204s
Ran all test suites.

Watch Usage
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.

در اینجا چند نکته قابل توجه است. اولا ، همانطور که قبلاً نیز اشاره شد ، به طور خودکار هر فایلی را با پسوند تست از جمله .test.js و .spec.js تشخیص می دهد. در این حالت ، فقط یک مجموعه آزمون وجود دارد – یعنی فقط یک فایل با پسوند .test.js — و آن مجموعه تست فقط یک تست را دارد. Jest می تواند آزمایشات را در سلسله مراتب کد شما تشخیص دهد ، بنابراین می توانید تست ها را در یک دیرکتوری قرار دهید و Jest آنها را پیدا می کند.
دوما ، Jest مجموعه آزمون شما را یک بار اجرا نمی کند و سپس خارج شود. بلکه ، این کار در ترمینال ادامه دارد. اگر تغییری در کد منبع ایجاد کرده باشید ، تست ها را دوباره انجام می دهد.
همچنین می توانید با استفاده از یکی از گزینه های صفحه کلید ، آزمایش های خود را محدود کنید. مثلاً اگر o را تایپ کنید ، فقط آزمایشات را روی فایل هایی که تغییر کرده اند اجرا میکند. این می تواند باعث صرفه جویی زمان زیادی در هنگام گسترش مجموعه های آزمایشی شما شود.
سرانجام می توانید با تایپ q از runner test خارج شوید. این کار را انجام دهید تا سریعاً فرمان خود را بازیابی کنید.
اسکریپت eject
اسکریپت نهایی npm eject است. این اسکریپت متعلقات و فایل های پیکربندی شما را در پروژه خود کپی می کند ، کنترل کاملی را روی کد شما ایجاد می کند اما پروژه را از جعبه ابزار یکپارچه Create React App خارج می کند. اکنون این دستور را اجرا نمی کنید زیرا ، پس از اجرای این اسکریپت ، نمی توانید این عمل را خنثی سازی کنید و هرگونه به روزرسانی در Create React App را از دست خواهید داد.
ارزش Create React App این است که نیازی نیست نگران میزان قابل توجهی پیکربندی باشید. ساخت برنامه های کاربردی مدرن جاوا اسکریپت به ابزارهای زیادی از سیستم های ساخت مانند Webpack گرفته تا ابزارهای تلفیقی مانند Babel نیاز دارد. Create React App تمام پیکربندی های موجود برای شما را کنترل می کند ، بنابراین ejecting به مدیریت مقابله با این پیچیدگی است.
نکته منفی Create React App این است که شما نمی توانید پروژه را به طور کامل شخصی سازی کنید. برای اکثر پروژه هایی که مشکلی ندارند ، اما می خواهید همه جنبه های مراحل ساخت را کنترل کنید ، باید کد را eject کنید. با این حال ، همانطور که قبلاً گفته شد ، پس از خارج کردن کد ، دیگر نمی توانید به نسخه های جدید Create React App را به روزرسانی کنید ، و مجبور خواهید بود پیشرفت های خود را به صورت دستی اضافه کنید.
در این مرحله ، شما اسکریپت هایی را برای ساخت و تست کد خود اجرا کرده اید. در مرحله بعد ، پروژه را روی یک سرور مجازی زنده شروع می کنید.
مرحله 3 – راه اندازی سرور مجازی
در این مرحله یک سرور مجازی محلی را تنظیم می کنید و پروژه را در مرورگر خود اجرا می کنید.
شما پروژه خود را با یک اسکریپت دیگر npm شروع می کنید. مانند npm test ، این اسکریپت به دستور run احتیاج ندارد. هنگامی که اسکریپت را اجرا می کنید ، یک سرور مجازی محلی راه اندازی می کنید ، کد پروژه را اجرا می کنید ، ناظری را مشاهده می کنید که تغییر کد را پیگیری می کند و پروژه را در یک مرورگر وب باز می کند.
پروژه را با تایپ کردن دستور زیر در ریشه پروژه خود شروع کنید. برای این آموزش ، ریشه پروژه شما دایرکتوری digital-ocean-tutorial است. حتماً این کار را در یک ترمینال یا سربرگ جداگانه باز کنید ، زیرا این اسکریپت تا زمانی که اجازه دهید اجرا خواهد شد:
⦁ $ npm start
⦁

قبل از شروع کار سرور مجازی ، متن مکان نگهدار را برای چند لحظه مشاهده خواهید کرد:
Output
Compiled successfully!

You can now view digital-ocean-tutorial in the browser.

http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

اگر اسکریپت را بصورت محلی اجرا کنید ، پروژه را در پنجره مرورگر شما باز کرده و تمرکز را از ترمینال به مرورگر منتقل می کند.
اگر این اتفاق نیفتد ، می توانید برای مشاهده سایت در حال کار به http: // localhost: 3000 / مراجعه کنید. اگر در حال حاضر سرور مجازی دیگری در پورت 3000 در حال کار دارید ، امکان خوبی است. Create React App پورت موجود بعدی را شناسایی کرده و سرور مجازی را با آن اجرا میکند. به عبارت دیگر ، اگر در حال حاضر یک پروژه درگاه 3000 داشته باشید ، این پروژه جدید از درگاه 3001 شروع می شود.
اگر این کار را از طریق یک سرور مجازی راه دور انجام می دهید ، می توانید سایت خود را بدون هیچگونه تنظیمات اضافی مشاهده کنید. آدرس http: // your_server_ip: 3000 خواهد بود. اگر پیکربندی فایروال داشته باشید ، باید پورت را روی سرور مجازی راه دور خود باز کنید.
در مرورگر ، پروژه قالب React زیر را مشاهده می کنید:

مادامی که اسکریپت در حال اجرا باشد ، شما یک سرور مجازی محلی فعال خواهید داشت. برای متوقف کردن اسکریپت ، پنجره یا زبانه ترمینال را ببندید یا CTRL + C یا ⌘- + c را در پنجره یا زبانه ای که اسکریپت شما اجرا می شود تایپ کنید.
در این مرحله ، شما سرور مجازی را راه اندازی کرده اید و اولین کد React خود را اجرا می کنید. اما قبل از ایجاد هرگونه تغییر در کد React JavaScript ، می بینید که چگونه React در وهله اول به صفحه ارائه می شود.
مرحله 4 – اصلاح صفحه اصلی
در این مرحله ، کد را در دایرکتوری public/ تغییر دهید. دیرکتوری عمومی شامل صفحه HTML پایه شماست. صفحه ای است که به عنوان ریشه پروژه شما ارائه می شود. شما به ندرت این دیرکتوری را در آینده ویرایش می کنید ، اما این پایه ای است که پروژه از آن شروع می شود و بخش مهمی از یک پروژه React است.
اگر سرور مجازی خود را کنسل کردید ، با شروع npm آن را مجدد راه اندازی کنید ، سپس ویرایشگر متن مورد علاقه خود را در یک پنجره ترمینال جدید باز کنید:
⦁ $ nano public/
⦁
در روش دیگر ، می توانید فایل ها را با دستور ls لیست کنید:
⦁ $ ls public/
⦁
لیستی از فایل ها مانند این را مشاهده خواهید کرد:
Output
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt

favicon.ico، logo192.png و logo512.png نمادهایی هستند که کاربر می تواند در سربرگ مرورگر یا تلفن خود مشاهده کند. مرورگر آیکون های با اندازه مناسب را انتخاب می کند. سرانجام ، بهتر است این موارد را با نمادهایی که بیشتر مناسب پروژه شما هستند جایگزین کنید. در حال حاضر ، می توانید آنها را رها کنید.
manifest.json مجموعه ای ساختار یافته از ابرداده ها است که پروژه شما را توصیف می کند. در میان موارد دیگر ، لیست میکند که کدام نماد برای گزینه های اندازه مختلف استفاده خواهد شد.
فایل robots.txt برای crawlerهای وب است. به crawlerها می گوید که کدام صفحه ها را میتوانند ایندکس کنند یا مجاز به ایندکس کردن نیستند. نیازی به تغییر هیچ فایل دیگری ندارید، مگر اینکه دلیل قانع کننده ای برای انجام این کار وجود داشته باشد. به عنوان مثال ، اگر می خواهید URL محتوای ویژه ای را به برخی از کاربران بدهید که نمی خواهید به راحتی در دسترس باشد ، می توانید آن را به robots.txt اضافه کنید و همچنان در دسترس عموم باشد اما توسط موتورهای جستجو ایندکس نمی شود.
فایل index.html ریشه برنامه شما است. این فایلی است که سرور مجازی می خواند ، و فایلی است که مرورگر شما نمایش می دهد. آن را در ویرایشگر متن خود باز کنید و نگاهی بیندازید.
اگر از خط فرمان کار می کنید ، می توانید با دستور زیر آن را باز کنید:
⦁ $ nano public/index.html
⦁
آنچه خواهید دید اینگونه است:
digital-ocean-tutorial/public/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<link rel=”icon” href=”%PUBLIC_URL%/favicon.ico” />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<meta name=”theme-color” content=”#000000″ />
<meta
name=”description”
content=”Web site created using create-react-app”
/>
<link rel=”apple-touch-icon” href=”%PUBLIC_URL%/logo192.png” />
<!–
manifest.json provides metadata used when your web app is installed on a
user’s mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
–>
<link rel=”manifest” href=”%PUBLIC_URL%/manifest.json” />
<!–
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike “/favicon.ico” or “favicon.ico”, “%PUBLIC_URL%/favicon.ico” will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
–>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=”root”></div>
<!–
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
–>
</body>
</html>

فایل بسیار کوتاه است هیچ تصویر یا کلمه ای در <body> وجود ندارد. به این دلیل است که React تمام ساختار HTML خود را ایجاد می کند و آن را با JavaScript وارد می کند. اما React باید بداند که کد را کجا تزریق کند ، و این نقش index.html است.
در ویرایشگر متن ، برچسب <title> را از React App به Sandbox تغییر دهید:
digital-ocean-tutorial/public/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<link rel=”icon” href=”%PUBLIC_URL%/favicon.ico” />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<meta name=”theme-color” content=”#000000″ />
…
<title>Sandbox</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=”root”></div>
<!–
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
–>
</body>
</html>

ویرایشگر متن خود را ذخیره کرده و از آن خارج شوید. مرورگر خود را بررسی کنید. عنوان نامی است که در سربرگ مرورگر قرار دارد. به طور خودکار بروزرسانی می شود. اگر اینطور نیست ، صفحه را ریفرش کنید و متوجه تغییر شوید.
اکنون به ویرایشگر متن خود برگردید. هر پروژه React از یک عنصر ریشه شروع می شود. می تواند چندین عنصر ریشه در یک صفحه وجود داشته باشد ، اما حداقل باید یکی وجود داشته باشد. این راه آگاهی React از این است که کد HTML تولید شده را کجا قرار دهد. عنصر <div id = “root”> را پیدا کنید. div ای است که React برای همه به روزرسانی های بعدی استفاده خواهد کرد. شناسه را از root به base تغییر دهید:
digital-ocean-tutorial/public/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
…
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=”base”></div>
<!–
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
–>
</body>
</html>

تغییرات را ذخیره کنید.
خطایی در مرورگر خود مشاهده خواهید کرد:

React به دنبال عنصری با شناسه root بود. اکنون که حذف شد ، React نمی تواند پروژه را شروع کند.
برگرداندن نام از base به root:
digital-ocean-tutorial/public/index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
…
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id=”root”></div>
<!–
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
–>
</body>
</html>

ذخیره کنید و از index.html خارج شوید.
در این مرحله ، شما سرور مجازی را راه اندازی کرده اید و یک تغییر جزئی در صفحه HTML ایجاد کرده اید. هنوز کد JavaScript را تغییر نداده اید. در بخش بعدی کد React JavaScript را به روز خواهید کرد.
مرحله 5 – اصلاح برچسب عنوان و استایل
در این مرحله ، اولین تغییر خود را در یک مؤلفه React در دیرکتوری src / انجام خواهید داد. یک تغییر کوچک در CSS و کد JavaScript ایجاد خواهید کرد که با استفاده از بارگذاری مجدد داخلی ، به طور خودکار در مرورگر شما به روز می شوند.
اگر سرور مجازی را متوقف کرده اید ، با شروع npm آن را مجدداً راه اندازی کنید. حالا کمی وقت بگذارید تا قسمت های دیرکتوری src / را ببینید. می توانید دایرکتوری کامل را در ویرایشگر متن مورد علاقه خود باز کنید ، یا می توانید با دستور زیر پروژه را در یک ترمینال لیست کنید:
⦁ $ ls src/
⦁
فایلهای زیر را در ترمینال یا ویرایشگر متن خود مشاهده خواهید کرد.
Output
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js

بیایید این فایل ها را یک باره مرور کنیم.
در ابتدا وقت زیادی را برای فایل serviceWorker.js نخواهید گذراند ، اما با شروع برنامه های پیشرونده وب ، این مسئله مهم خواهد شد. ارائه دهنده سرویس می تواند بسیاری از کارها از جمله push notifications و offline caching را انجام دهد ، اما فعلاً بهتر است آن را رها کنید.
فایل های بعدی که باید به آنها مراجعه کنید ، setupTests.js و App.test.js هستند. اینها برای فایلهای آزمایشی استفاده می شوند. در واقع ، هنگامی که شما test npm را در مرحله 2 اجرا کردید ، اسکریپت این فایلها را اجرا می کند. فایل setupTests.js کوتاه است. همه چیزی که شامل میشود چند روش expect معمول است. در آموزش های آینده این مجموعه در این مورد اطلاعات بیشتری کسب خواهید کرد.
App.test.js را باز کنید:
⦁ $ nano src/App.test.js
⦁
وقتی آن را باز کردید ، یک آزمایش پایه را مشاهده خواهید کرد:
digital-ocean-tutorial/src/App.test.js
import React from ‘react’;
import { render } from ‘@testing-library/react’;
import App from ‘./App’;

test(‘renders learn react link’, () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

این آزمون به دنبال عبارت learn react در سند است. اگر به مرورگری که پروژه شما را اجرا می کند برگردید ، این عبارت را در صفحه مشاهده خواهید کرد. تست react با اکثر تست های واحد متفاوت است. از آنجا که مؤلفه ها می توانند شامل اطلاعات تصویری مانند نشانه گذاری ، و همچنین منطقی برای دستکاری داده ها باشند ، آزمایش های واحد معمول به آسانی کار نمی کند. React testing به نوعی از تست عملکردی یا ادغام نزدیک تر است.
در مرحله بعد ، برخی از فایل های یک ظاهر طراحی شده را مشاهده خواهید کرد: App.css ، index.css و logo.svg. روش های مختلفی برای کار طراحی در React وجود دارد ، اما ساده ترین کار نوشتن CSS ساده است زیرا نیازی به تنظیمات اضافی نیست.
چندین فایل CSS وجود دارد زیرا می توانید سبک ها را همانطور که یک فایل جاوا اسکریپت دیگر بودند به یک مولفه وارد کنید. از آنجا که شما توانایی وارد کردن CSS را مستقیماً به یک مؤلفه دارید ، ممکن است CSS را نیز تقسیم کنید تا فقط به یک مؤلفه جداگانه اعمال شود. آنچه شما انجام می دهید جدا کردن مسائل است. شما تمام CSS را از JavaScript جدا نمی کنید. در عوض ، تمام CSS ، جاوا اسکریپت ، نشانه گذاری و تصاویر مرتبط را در کنار هم نگه می دارید.
App.css را در ویرایشگر متن خود باز کنید. اگر از خط فرمان کار می کنید ، می توانید با دستور زیر آن را باز کنید:
⦁ $ nano src/App.css
⦁
این کدی است که مشاهده خواهید کرد:
digital-ocean-tutorial/src/App.css
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

این یک فایل استاندارد CSS است و پیش پردازنده های خاصی برای CSS ندارد. در صورت تمایل می توانید بعداً آنها را اضافه کنید ، اما در ابتدا فقط CSS ساده دارید. Create React App سعی دارد در حالی که هنوز محیطی out-of-the-box ارائه می دهد ، بدون قید و شرط باشد.
به App.css برگردید، یکی از مزایای استفاده از Create React App این است که همه فایل ها را مشاهده می کند ، بنابراین اگر تغییری ایجاد کردید ، بدون لود مجدد ، آن را در مرورگر خود مشاهده خواهید کرد.
برای دیدن این در عمل ، تغییر کوچکی در رنگ پس زمینه در App.css ایجاد کنید. آن را از # 282c34 به آبی تغییر دهید و فایل را ذخیره کنید. استایل نهایی مانند این است:
digital-ocean-tutorial/src/App.css
.App {
text-align: center;
}
…
.App-header {
background-color: blue
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
…

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

مرورگر خود را بررسی کنید. قبلا به این شکل بود.

پس از تغییر اینگونه خواهد بود.

پیش بروید و رنگ پس زمینه را به # 282c34 تغییر دهید.
digital-ocean-tutorial/src/App.css
.App {
text-align: center;

…

.App-header {
background-color: #282c34
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

…

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

فایل را ذخیره کنید و از آن خارج شوید.
شما یک تغییر CSS کوچک ایجاد کرده اید. اکنون زمان آن رسیده است که تغییراتی در کد React JavaScript ایجاد کنیم. با باز کردن index.js شروع کنید.
⦁ $ nano src/index.js
⦁
در اینجا آنچه خواهید دید آمده است:
digital-ocean-tutorial/src/index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
import * as serviceWorker from ‘./serviceWorker’;

ReactDOM.render(<App />, document.getElementById(‘root’));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

در بالا ، React ، ReactDOM ، index.css ، Appو serviceWorker را وارد می کنید. با وارد کردن React ، شما در واقع کد را برای تبدیل JSX به JavaScript واکشی میکنید. JSX عناصر HTML مانند هستند. به عنوان مثال ، توجه کنید که چگونه هنگام استفاده از برنامه ، آن را مانند یک <App />عنصر HTML درنظر میگیرید. در آموزش های بعدی این مجموعه ، در این مورد بیشتر آموزش خواهید دید.
ReactDOM کدی است که کد React شما را به عناصر پایه مانند صفحه index.html که در public/ دیدید وصل می کند. به خط هایلایت شده زیر نگاه کنید:
digital-ocean-tutorial/src/index.js
…
import * as serviceWorker from ‘./serviceWorker’;

ReactDOM.render(<App />, document.getElementById(‘root’));
…
serviceWorker.unregister();

این کد به React دستور می دهد تا یک عنصر با شناسه root پیدا کند و کد React را در آنجا تزریق کند. <App/>عنصر اصلی شماست و همه چیز از آنجا منشعب خواهد شد. این نقطه شروع برای همه کد های آینده React است.
در بالای فایل ، چند ورودی را مشاهده خواهید کرد. index.css را وارد می کنید ، اما در واقع کاری با آن انجام نمی دهید. با وارد کردن آن ، از طریق اسکریپت های React به Webpack می گویید که کد CSS را در بسته بندی کامپایل نهایی وارد کند. اگر آن را وارد نکنید ، نشان داده نمی شود.
از src / index.js خارج شوید.
در این مرحله ، هنوز چیزی را که در مرورگر خود میبنید، مشاهده نکردید. برای دیدن آن ، App.js را باز کنید:
⦁ $ nano src/App.js
⦁
کد موجود در این فایل مانند یک سری عناصر HTML معمولی به نظر می رسد. آنچه خواهید دید اینگونه است:
digital-ocean-tutorial/src/App.js
import React from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

function App() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className=”App-link”
href=”https://reactjs.org”
target=”_blank”
rel=”noopener noreferrer”
>
Learn React
</a>
</header>
</div>
);
}

export default App;

محتویات برچسب <p> را از Edit <code>src/App.js</code> and save to reload. به Hello, world تغییر دهید و تغییرات خود را ذخیره کنید.
digital-ocean-tutorial/src/App.js
…

function App() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Hello, world
</p>
<a
className=”App-link”
href=”https://reactjs.org”
target=”_blank”
rel=”noopener noreferrer”
>
Learn React
</a>
</header>
</div>
);
}
…

به مرورگر خود بروید و تغییر را مشاهده خواهید کرد:

اکنون اولین به روزرسانی خود را در مورد مؤلفه React انجام داده اید.
قبل از ادامه ، به چند مورد دیگر توجه کنید. در این مؤلفه ، فایل logo.svg را وارد می کنید و آن را به یک متغیر اختصاص می دهید. سپس در عنصر <img> آن کد را به عنوان src اضافه می کنید.
چند مورد در اینجا اتفاق می افتد. به عنصر img نگاه کنید:
digital-ocean-tutorial/src/App.js
…
function App() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<p>
Hello, world
</p>
…

توجه کنید که چگونه لوگو را در نوارهای فرفری منتقل می کنید. هر زمان که مشخصاتی را منتقل می کنید که رشته یا عدد نیستند ، باید از نوارهای فرفری استفاده کنید. React به جای رشته ها با آن ها به عنوان JavaScript رفتار خواهد کرد. در این حالت ، شما در حال وارد کردن تصویر نیستید؛ در عوض در حال ارجاع تصویر هستید. هنگامی که Webpack پروژه را ساخت ، تصویر را مدیریت می کند و منبع را در مکان مناسب قرار می دهد.
از ویرایشگر متن خارج شوید.
اگر به عناصر DOM در مرورگر خود نگاه کنید ، می بینید که مسیری را اضافه می کند. اگر از Chrome استفاده می کنید ، می توانید با کلیک راست بر روی عنصر و انتخاب Inspect ، این عنصر را بازرسی کنید.
در اینجا ظاهر آن در مرورگر آورده شده است:

DOM دارای این خط است:
<img src=”/static/media/logo.5d5d9eef.svg” class=”App-logo” alt=”logo”>
Copy

کد شما کمی متفاوت خواهد بود زیرا لوگو نام دیگری خواهد داشت. Webpack می خواهد مطمئن شود که مسیر تصویر منحصر به فرد است. بنابراین حتی اگر تصاویر را با همین نام وارد کنید ، با مسیری متفاوت ذخیره می شوند.
در این مرحله ، شما تغییر کوچکی در کد React JavaScript ایجاد کرده اید. در مرحله بعد ، از دستور build برای به حداقل رساندن کد در یک فایل کوچک که می تواند در یک سرور مجازی مستقر شود استفاده می کنید.
مرحله 6 – ساخت پروژه
در این مرحله شما کد را در بسته نرم افزاری قرار می دهید که می تواند در سرور مجازی های خارجی مستقر شود.
به ترمینال خود برگردید و پروژه را بسازید. این فرمان را قبلاً اجرا کردید ، اما به عنوان یادآوری ، این دستور، اسکریپت ساخت را اجرا می کند. یک دیرکتوری جدید با فایلهای ترکیبی و کوچک شده ایجاد می کند. برای اجرای build ، دستور زیر را از ریشه پروژه خود اجرا کنید:
⦁ $ npm run build
⦁
با کامپایل کردن کد تأخیر ایجاد می شود و پس از اتمام آن ، یک دیرکتوری جدید به نام build / خواهید داشت.
build / index.html را در یک ویرایشگر متن باز کنید.
⦁ $ nano build/index.html
⦁
چیزی شبیه به این را خواهید دید:
digital-ocean-tutorial/build/index.html
<!doctype html><html lang=”en”><head><meta charset=”utf-8″/><link rel=”icon” href=”/favicon.ic

دایرکتوری build تمام کدهای شما را می گیرد و کامپایل می کند و آن را به کوچکترین حالت قابل استفاده تبدیل می کند. فرقی نمی کند که انسان بتواند آن را بخواند ، زیرا این یک کد عمومی نیست. کم حجم کردن به این حالت باعث می شود کد در حالی که هنوز هم کار میکند فضای کمتری را اشغال کند. بر خلاف برخی از زبانها مانند پایتون ، فضای سفید نحوه تفسیر کد توسط رایانه را تغییر نمی دهد.
نتیجه
در این آموزش ، شما اولین برنامه React خود را ایجاد کرده اید ، پروژه خود را با استفاده از ابزارهای build جاوا اسکریپت بدون نیاز به مراجعه به جزئیات فنی ، پیکربندی کرده اید. این مزیت Create React App میباشد: برای شروع لازم نیست همه چیز را بدانید. این امکان را به شما می دهد تا مراحل پیچیده ساخت را رد کنید تا بتوانید منحصراً روی کد React تمرکز کنید.
دستورات لازم را برای شروع ، آزمایش و ساختن یک پروژه آموخته اید. از این دستورات به طور مرتب استفاده خواهید کرد ، بنابراین برای آموزش های بعدی نوت برداری کنید. از همه مهمتر ، شما اولین مؤلفه React خود را به روز کردید.
اگر در عمل مایل به دیدن React هستید ، آموزش نحوه نمایش اطلاعات از DigitalOcean API را با آموزش React امتحان کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

پارامترهای پیش فرض در جاوا اسکریپت – اجرای چندین نسخه PHP بر روی یک سرور Debian 10

نحوه راه اندازی یک پروژه React با برنامه React – نصب و ایمن سازی phpMyAdmin در اوبونتو 18

پیکربندی یک تایید اعتبار مجاز(CA) در CentOS 8 – تنظیم برنامه Node.js برای تولید در CentOS 7

نصب MariaDB در اوبونتو 18.04 – ایمن کردن Apache با Let’s Encrypt در Debian 10

نحوه نصب Node.js در CentOS 8 – بازنویسی URL را با mod_rewrite برای Apache در Debian 10

راه اندازی فایروال با استفاده از firewalld در CentOS 8 – نصب وب سرور Apache در Debian 10

اضافه کردن و حذف کاربران در CentOS 8 – نصب Apache Tomcat 9 در Debian 10

نصب و استفاده از PostgreSQL در CentOS 8 – راه اندازی سرور اولیه با Debian 10

نصب MariaDB در CentOS 8 – چگونه با JSX عناصر واقعی ایجاد کنیم

نصب و پیکربندی VNC در Debian 10 – استفاده از سرور از راه دور Docker

نصب و ایمن سازی Grafana در اوبونتو 18 – نحوه نصب Git در CentOS 8

نصب Git در Debian 10 – نصب و پیکربندی Zabbix برای ردیابی ایمن سرورهای

نحوه نصب Node.js در Debian 10 – نصب وب سرور Apache در CentOS 7

نحوه نصب Webmin در Debian 10 – نصب و پیکربندی Zabbix برای ردیابی ایمن سرور

نصب وردپرس با بانک اطلاعاتی در اوبونتو – ساخت و استقرار سرور GraphQL با Node.js و MongoDB

نصب پایتون 3 و تنظیم نویسی محلی macOS – نصب و ایمن سازی phpMyAdmin با Nginx در سرور

نصب Nagios 4 و نظارت بر سرور اوبونتو 18 – نصب Python 3 و تنظیم یک محیط برنامه نویسی

نحوه نصب R بر روی Debian 10 – راه اندازی سرور Prisma روی اوبونتو 18.04

نصب و پیکربندی Laravel با LEMP در اوبونتو 18 – نصب و پیکربندی pgAdmin 4 در Server Mode

نصب Python 3 و تنظیم برنامه نویسی CentOS 8 – نصب Jitsi Meet در Ubuntu 18.04

کلمات کلیدی خرید سرور

برچسب‌ها:hot reloading, macOS

۰ نظر

behnam gol mohamadi

نحوه نصب Node.js در CentOS 8

۶ مرداد۹۹

Node.js یک زمان اجرا JavaScript برای برنامه نویسی سمت سرور مجازی است که برنامه نویسان را قادر می سازد تا با استفاده از JavaScript ، قابلیت backend مقیاس پذیر را ایجاد کنند ، زبانی که بسیاری از افراد از طریق توسعه وب مبتنی بر مرورگر با آن آشنا هستند.
در این راهنما ، ما سه روش مختلف نصب Node.js بر روی سرور مجازی CentOS 8 را به شما نشان خواهیم داد:
• استفاده از dnf برای نصب بسته nodejs از منبع پیش فرض AppStream CentOS
• نصب nvm ، Node Version Manager و استفاده از آن برای نصب و مدیریت چندین نسخه node
• ساخت و نصب node از منبع
بیشتر کاربران باید از dnf برای نصب نسخه های از پیش بسته بندی شده node استفاده کنند. اگر یک توسعه دهنده هستید یا نیاز به مدیریت چندین نسخه نصب شده از Node دارید ، از روش nvm استفاده کنید. ساختن از سورس به ندرت برای اکثر کاربران ضروری است.
پیش نیازها
برای تکمیل این آموزش ، به سرور مجازی ی که دارای CentOS 8 باشد ، نیاز خواهید داشت. ما فرض خواهیم کرد که شما به عنوان یک کاربر غیر ریشه و فعال در این سرور مجازی وارد شده اید. برای انجام این کار، به راهنمای اولیه راه اندازی سرور مجازی ما برای CentOS 8 مراجعه کنید.
گزینه 1 – نصب node از منبع CentOS AppStream
Node.js از منبع پیش فرض نرم افزار AppStream در CentOS 8 در دسترس است. چندین نسخه وجود دارد ، و می توانید با فعال کردن module stream مناسب ، بین آنها انتخاب کنید. ابتدا جریان های موجود برای ماژول nodejs را با استفاده از دستور dnf لیست کنید:
$ sudo dnf module list nodejs

Output
Name Stream Profiles Summary
nodejs 10 [d] common [d], development, minimal, s2i Javascript runtime
nodejs 12 common, development, minimal, s2i

دو جریان در دسترس است ، 10 و 12. [d] نشان می دهد که نسخه 10 جریان پیش فرض است. اگر ترجیح می دهید Node.js 12 را نصب کنید ، اکنون جریانهای ماژول را تغییر دهید:
$ sudo dnf module enable nodejs:12

از شما خواسته می شود تصمیم خود را تأیید کنید. پس از آن جریان 12 نسخه فعال می شود و می توانیم نصب را ادامه دهیم. برای اطلاعات بیشتر در مورد کار با جریانهای ماژول ، به مطالب CentOS AppStream مراجعه کنید.
بسته nodejs را با dnf نصب کنید:
باز هم ، dnf از شما می خواهد تا اقدامات انجام شده را تأیید کنید. برای انجام این کار y را فشار دهید و ENTER را نصب کنید.
بررسی کنید که نصب با جستار node برای شماره نسخه خود موفقیت آمیز باشد:
$ node –version

Output
v12.13.1

اگر به جای آن Node.js 10 را نصب کنید ، خروجی شما متفاوت خواهد بود.
توجه: هر دو نسخه موجود Node.js نسخه های پشتیبانی طولانی مدت هستند ، به این معنی که دارای یک پنجره تعمیر و نگهداری طولانی تر هستند. برای اطلاعات بیشتر در مورد چرخه عمر ، به صفحه رسمی Node.js مراجعه کنید.

نصب بسته nodejs همچنین باید برنامه npm Node Package Manager را به عنوان یک وابستگی نصب کند. تأیید کنید که به درستی نصب شده است:
$ npm –version

Output
6.12.1

در این مرحله شما با موفقیت Node.js و npm را با استفاده از منابع نرم افزار CentOS درج کرده اید. در بخش بعدی نحوه استفاده از Node Version Manager برای انجام این کار نمایش داده خواهد شد.
گزینه 2 – نصب node با استفاده از مدیر نسخه node
روش دیگر نصب Node.js که به خصوص قابل انعطاف است استفاده از nvm ، یعنی مدیر نسخه node است. این بخش از نرم افزار به شما امکان می دهد بسیاری از نسخه های مختلف مستقل Node.js و بسته های مربوط به Node را هم زمان نصب و نگهداری کنید.
برای نصب NVM در دستگاه CentOS 8 خود ، به صفحه GitHub پروژه مراجعه کنید. دستور curl را از فایل README که در صفحه اصلی نمایش داده شده کپی کنید. آخرین نسخه اسکریپت نصب را برای شما می آورد.
قبل اتصال دستور به bash ، بهتر است که اسکریپت را مرور کنید تا مطمئن شوید کاری انجام نمی دهد که با آن موافق نیستید. شما می توانید با حذف بخش | bashدر انتهای دستور Curl این کار را انجام دهید:
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh

نگاهی بیندازید و اطمینان حاصل کنید که با تغییراتی که ایجاد می کند ، موافق هستید. وقتی راضی شدید ، مجدداً دستور را با | bash در انتها ، اجرا کنید. URL ای که استفاده می کنید بسته به آخرین نسخه NVM تغییر خواهد کرد ، اما در حال حاضر ، اسکریپت را می توانید با تایپ دستور زیر دانلود و اجرا کنید:
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

این کار اسکریپت nvm را روی حساب کاربری شما نصب می کند. برای استفاده از آن ، ابتدا باید فایل .bash_profile خود را تهیه کنید:
$ source ~/.bash_profile

اکنون می توانید از NVM بپرسید کدام نسخه های Node در دسترس هستند:
nvm list-remote
. . .
v12.13.0 (LTS: Erbium)
v12.13.1 (LTS: Erbium)
v12.14.0 (LTS: Erbium)
v12.14.1 (LTS: Erbium)
v12.15.0 (LTS: Erbium)
v12.16.0 (LTS: Erbium)
v12.16.1 (Latest LTS: Erbium)
v13.0.0
v13.0.1
v13.1.0
v13.2.0
v13.3.0
v13.4.0
v13.5.0
v13.6.0
v13.7.0
v13.8.0
v13.9.0
v13.10.0
v13.10.1
v13.11.0
v13.12.0

این یک لیست بسیار طولانی است! با تایپ کردن هر نسخه منتشر شده که می بینید می توانید نسخه ای از Node را نصب کنید. به عنوان مثال ، برای دریافت نسخه v13.6.0 ، می توانید تایپ کنید:
$ nvm install v13.6.0

با تایپ کردن این دستور میتوانید نسخه های مختلفی که نصب کرده اید را مشاهده کنید:
nvm list
Output
-> v13.6.0
default -> v13.6.0
node -> stable (-> v13.6.0) (default)
stable -> 13.6 (-> v13.6.0) (default)

این دستور نسخه فعال فعلی در خط اول (-> v13.6.0) را نشان می دهد ، و بعد از آن برخی نام های مستعار و نسخه هایی که آن نام های مستعار به آن اشاره دارند، آمده است.
توجه: اگر نسخه دیگری از Node را نیز از طریق منابع نرم افزار CentOS نصب کرده اید ، ممکن است یک system -> v12.13.1 (یا شماره نسخه دیگری) را در اینجا مشاهده کنید. همیشه می توانید نسخه سیستم Node را با استفاده از nvm use system فعال کنید.

علاوه بر این ، نامهای مختلفی را برای انتشارهای مختلف Node با پشتیبانی بلند مدت (LTS) مشاهده خواهید کرد:
Output
lts/* -> lts/erbium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.19.0 (-> N/A)
lts/erbium -> v12.16.1 (-> N/A)

ما می توانیم نسخه ای را نیز بر اساس این نام های مستعار نصب کنیم. به عنوان مثال ، برای نصب آخرین نسخه پشتیبانی طولانی مدت ، erbium ، دستور زیر را اجرا کنید:
$ nvm install lts/erbium

Output
Downloading and installing node v12.16.1…
. . .
Now using node v12.16.1 (npm v6.13.4)

می توانید با استفاده از nvm بین نسخه های نصب شده جابجا شوید:
$ nvm use v13.6.0

Now using node v13.6.0 (npm v6.13.4)

با تایپ کردن این دستور می توانید تأیید کنید که نصب با استفاده از همان تکنیک بخش های دیگر موفقیت آمیز بوده است:
node –version
Output
v13.6.0

نسخه صحیح node همانطور که انتظار داشتیم روی دستگاه ما نصب شده است. یک نسخه سازگار npm نیز موجود است.
گزینه 3 – نصب node از منبع
راه دیگر برای نصب Node.js دانلود کد منبع و کامپایل آن است.
برای انجام این کار ، از مرورگر وب خود استفاده کنید تا به صفحه رسمی Node.js بروید ، بر روی لینک Source Code کلیک راست کرده و بر روی Copy Link Address یا هر گزینه مشابهی که مرورگر شما نشان می دهد کلیک کنید.
به بخش SSH خود برگردید، ابتدا مطمئن شوید که در دایرکتوری هستید که می توانید در آن بنویسید. ما از دیرکتوری اصلی کاربر فعلی استفاده خواهیم کرد:
$ cd ~

سپس curl را تایپ کنید ، لینکی را که از وب سایت کپی کرده اید پیست کنید ، و بعد از آن | tar xzقرار دهید:
$ curl https://nodejs.org/dist/v12.16.1/node-v12.16.1.tar.gz | tar xz

از ابزار curl برای دانلود منبع استفاده میکند، سپس آن را مستقیماً به ابزار tar مرتبط میکند ، که آن را در دیرکتوری فعلی اکسترکت می کند.
به دیرکتوری منبع تازه ایجاد شده بروید:
$ cd node-v*

چند بسته وجود دارد که باید آنها را از منابع CentOS دانلود کنیم. برای نصب این موارد از dnf استفاده کنید:
$ sudo dnf install gcc-c++ make python2

از شما خواسته می شود نصب را تأیید کنید. برای انجام این کار y را وارد کرده و enter بزنید. اکنون می توانیم نرم افزار را پیکربندی و کامپایل کنیم:
$ ./configure

$ make -j4

کامپایل کاملاً مدتی طول خواهد کشید (حدود 30 دقیقه روی یک سرور مجازی چهار هسته ای). ما برای اجرای چهار فرآیند کامپایل موازی از گزینه -j4 استفاده کرده ایم. می توانید این گزینه را حذف کنید یا بر اساس تعداد هسته پردازنده ای که در دسترس دارید ، عدد را به روز کنید.
پس از اتمام کامپایل ، می توانید با تایپ کردن دستور زیر نرم افزار را روی سیستم خود نصب کنید:
$ sudo make install

برای بررسی موفقیت آمیز بودن نصب ، از node بخواهید شماره نسخه خود را نشان دهد:
$ node –version

v12.16.1

اگر شماره نسخه صحیح را مشاهده کردید ، نصب با موفقیت انجام شده است. به طور پیش فرض ، node همچنین یک نسخه سازگار از npm را نصب می کند ، بنابراین باید در دسترس باشد.
نتیجه
در این آموزش نحوه نصب Node.js را با استفاده از منبع نرم افزار CentOS AppStream ، که از Node Version Manager استفاده میکند و کامپایل از منبع آموختیم.
اگر می خواهید اطلاعات بیشتری درباره برنامه نویسی در JavaScript داشته باشید ، لطفا سری آموزش های مرتبط ما را بخوانید:
How to Code in Javascript: یک مرور کلی بر زبان JavaScript ، قابل استفاده برای مرورگر و Node.js
How to Code in Node.js: یک سری تمرین که اصول استفاده از Node.js را آموزش می دهد

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

پارامترهای پیش فرض در جاوا اسکریپت – اجرای چندین نسخه PHP بر روی یک سرور Debian 10

نحوه راه اندازی یک پروژه React با برنامه React – نصب و ایمن سازی phpMyAdmin در اوبونتو 18

پیکربندی یک تایید اعتبار مجاز(CA) در CentOS 8 – تنظیم برنامه Node.js برای تولید در CentOS 7

نصب MariaDB در اوبونتو 18.04 – ایمن کردن Apache با Let’s Encrypt در Debian 10

نحوه نصب Node.js در CentOS 8 – بازنویسی URL را با mod_rewrite برای Apache در Debian 10

راه اندازی فایروال با استفاده از firewalld در CentOS 8 – نصب وب سرور Apache در Debian 10

اضافه کردن و حذف کاربران در CentOS 8 – نصب Apache Tomcat 9 در Debian 10

نصب و استفاده از PostgreSQL در CentOS 8 – راه اندازی سرور اولیه با Debian 10

نصب MariaDB در CentOS 8 – چگونه با JSX عناصر واقعی ایجاد کنیم

نصب و پیکربندی VNC در Debian 10 – استفاده از سرور از راه دور Docker

نصب و ایمن سازی Grafana در اوبونتو 18 – نحوه نصب Git در CentOS 8

نصب Git در Debian 10 – نصب و پیکربندی Zabbix برای ردیابی ایمن سرورهای

نحوه نصب Node.js در Debian 10 – نصب وب سرور Apache در CentOS 7

نحوه نصب Webmin در Debian 10 – نصب و پیکربندی Zabbix برای ردیابی ایمن سرور

نصب وردپرس با بانک اطلاعاتی در اوبونتو – ساخت و استقرار سرور GraphQL با Node.js و MongoDB

نصب پایتون 3 و تنظیم نویسی محلی macOS – نصب و ایمن سازی phpMyAdmin با Nginx در سرور

نصب Nagios 4 و نظارت بر سرور اوبونتو 18 – نصب Python 3 و تنظیم یک محیط برنامه نویسی

نحوه نصب R بر روی Debian 10 – راه اندازی سرور Prisma روی اوبونتو 18.04

نصب و پیکربندی Laravel با LEMP در اوبونتو 18 – نصب و پیکربندی pgAdmin 4 در Server Mode

نصب Python 3 و تنظیم برنامه نویسی CentOS 8 – نصب Jitsi Meet در Ubuntu 18.04

کلمات کلیدی خرید سرور

برچسب‌ها:AppStream, CentOS AppStream, module stream

۰ نظر

behnam gol mohamadi

نصب و پیکربندی Postfix به عنوان سرور SMTP به صورت Send-Only در اوبونتو 20.04

۵ مرداد۹۹

Postfix یک عامل انتقال ایمیل (MTA) است ، برنامه ای که برای ارسال و دریافت ایمیل استفاده می شود. می توان آن را پیکربندی کرد تا برای ارسال ایمیل فقط با برنامه محلی استفاده نمود. این در شرایطی مفید است که باید به طور مرتب اعلان های ایمیل را از برنامه های خود ارسال کنید یا صرفا ترافیک خروجی زیادی دارید که ارائه دهنده خدمات ایمیل شخص ثالث اجازه نمی دهد. همچنین ضمن حفظ قابلیت های مورد نیاز ، گزینه جایگزین سبک تری برای اجرای یک سرور مجازی SMTP تمام عیار میباشد.
در این آموزش Postfix را به عنوان سرور مجازی SMTP send-onlyنصب و پیکربندی می کنید. همچنین گواهی TLS رایگان را از Let’s Encrypt برای دامنه خود و رمزگذاری ایمیل های خروجی با استفاده از آنها درخواست میدهید.
پیش نیازها
• یک سرور مجازی Ubuntu 20.04 که طبق راهنمای ستاپ اولیه سرور مجازی با اوبونتو 20.04 تنظیم شده باشد ، شامل ایجاد کاربر sudo غیر ریشه.
• نام دامنه کاملاً ثبت شده. در سراسر این آموزش از your_domain استفاده خواهد شد. می توانید نام دامنه را در Namecheap خریداری کنید ، به صورت رایگان در Freenom دریافت کنید ، یا از ثبت دامنه مورد نظر خود استفاده کنید.
• رکورد A DNS با your_domain که به آدرس IP عمومی سرور مجازی شما اشاره کند. برای جزئیات بیشتر در مورد چگونگی اضافه کردن آنها می توانید این مقدمه را در DigitalOcean DNS دنبال کنید.
می توانید با تایپ hostname در خط فرمان ، نام میزبان سرور مجازی را تأیید کنید. خروجی باید با نامی که به دراپلت داده اید مطابقت داشته باشد.
مرحله 1 – نصب Postfix
در این مرحله Postfix را نصب خواهید کرد. سریعترین راه نصب بسته mailutils است که Postfix را با چند برنامه تکمیلی که برای تست ارسال ایمیل استفاده می کنید ، تنظیم می کند.
ابتدا بانک اطلاعاتی بسته را به روز کنید:
⦁ $ sudo apt update

سپس با اجرای دستور زیر Postfix را نصب کنید:
⦁ $ sudo apt install mailutils
⦁
نزدیک پایان مراحل نصب ، پنجره پیکربندی Postfix به شما ارائه می شود:

گزینه پیش فرض Internet Site است. این گزینه پیشنهادی برای مورد استفاده شما است ، بنابراین TAB و سپس ENTER را فشار دهید. اگر فقط متن توضیحات را می بینید ، TAB را فشار دهید تا OK را انتخاب کنید ، سپس ENTER را بزنید.
اگر به صورت خودکار نمایش داده نمی شود ، دستور زیر را اجرا کنید تا آن را شروع کنید:
⦁ $ sudo dpkg-reconfigure postfix
⦁
پس از آن ، اعلان پیکربندی دیگری در رابطه با System mail name دریافت می کنید:

System mail name باید به همان نامی باشد که هنگام ایجاد سرور مجازی خود به آن اختصاص داده اید. پس از اتمام ، TAB را فشار دهید ، و ENTER را بزنید.
اکنون Postfix را نصب کرده اید و آماده پیکربندی آن هستید.
مرحله 2 – پیکربندی Postfix
در این مرحله ، Postfix را پیکربندی می کنید تا فقط از سرور مجازی که در آن کار می کند – یعنی از localhost ، ایمیل بفرستد و دریافت کند.
برای این کار ، Postfix باید به گونه ای پیکربندی شود که فقط به رابط حلقه برگشت گوش دهد ، یعنی رابط شبکه مجازی که سرور مجازی برای برقراری ارتباط داخلی استفاده میکند. برای ایجاد تغییرات ، باید فایل اصلی پیکربندی Postfix به نام main.cf را ویرایش کنید ، که تحت etc / postfix ذخیره شده است.
با استفاده از ویرایشگر متن مورد علاقه خود ، آن را برای ویرایش باز کنید:
⦁ $ sudo nano /etc/postfix/main.cf
⦁
سطرهای زیر را پیدا کنید:
/etc/postfix/main.cf
. . .
mailbox_size_limit = 0
recipient_delimiter = +
inet_interfaces = all
. . .

مقدار تنظیمات inet_interfaces را روی loopback-onlyتنظیم کنید:
/etc/postfix/main.cf
. . .
mailbox_size_limit = 0
recipient_delimiter = +
inet_interfaces = loopback-only
. . .

دستور العمل دیگری که باید اصلاح کنید ، mydestination است که برای مشخص کردن لیست دامنه هایی که از طریق انتقال تحویل ایمیل local_transport ارائه می شوند ، استفاده می گردد. به طور پیش فرض ، مقادیر مشابه این است:
/etc/postfix/main.cf
. . .
mydestination = $myhostname, your_domain, localhost.com, , localhost
. . .

خط را تغییر دهید تا مانند این باشد:
/etc/postfix/main.cf
. . .
mydestination = localhost.$mydomain, localhost, $myhostname
. . .

اگر دامنه شما در واقع یک دامنه فرعی است و می خواهید پیام های ایمیل به گونه ای به نظر برسد که از دامنه اصلی ارسال شده اند ، می توانید خط زیر را به انتهای main.cf اضافه کنید:
/etc/postfix/main.cf
…
masquerade_domains = your_main_domain

تنظیمات اختیاری maskquerade_domains مشخص می کند که برای کدام دامنه ها، قسمت های فرعی باید در آدرس ایمیل حذف شوند.
وقتی کارتان تمام شد ، فایل را ذخیره کنید و ببندید.
توجه: اگر میزبان چندین دامنه در یک سرور مجازی واحد هستید ، سایر دامنه ها نیز می توانند با استفاده از دستورالعمل mydestination به Postfix منتقل شوند.

سپس با اجرای دستور زیر Postfix را ریستارت کنید:
⦁ $ sudo systemctl restart postfix
⦁
Postfix را پیکربندی کرده اید تا فقط از سرور مجازی شما ایمیل ارسال کند. اکنون با ارسال یک پیام نمونه به آدرس ایمیل ، آن را آزمایش خواهید کرد.
مرحله 3 – تست سرور مجازی SMTP
در این مرحله ، تست خواهید کرد که آیا Postfix می تواند با استفاده از دستور mail ، که بخشی از بسته mailutils است که در مرحله اول نصب کرده اید ، ایمیل را به یک حساب ایمیل خارجی ارسال کند.
برای ارسال ایمیل تستی ، دستور زیر را اجرا کنید:
⦁ $ echo “This is the body of the email” | mail -s “This is the subject line” your_email_address
⦁
می توانید بدنه و موضوع ایمیل را به دلخواه خود تغییر دهید. به یاد داشته باشید که your_email_address را با آدرس ایمیل معتبری که می توانید به آن دسترسی پیدا کنید ، جایگزین کنید.
اکنون آدرس ایمیلی را که برای این پیام ارسال کرده اید ، بررسی کنید. باید پیام را در صندوق ورودی خود ببینید. اگر در آنجا نباشد ، پوشه اسپم خود را بررسی کنید. در این مرحله ، تمام ایمیل هایی که می فرستید غیرقابل رمزگذاری هستند ، که باعث می شود ارائه دهندگان خدمات فکر کنند که این ایمیل احتمالاً اسپم است. رمزگذاری را بعداً در مرحله 5 انجام خواهید داد.
اگر خطایی از فرمان mail دریافت کرده اید ، یا پس از مدت طولانی پیامی دریافت نکرده اید ، بررسی کنید که پیکربندی Postfix که ویرایش کردید معتبر است و نام سرور مجازی و نام هاست روی دامنه شما تنظیم شده باشند.
توجه داشته باشید که با این پیکربندی ، آدرس در قسمت From برای ایمیلهای آزمایشی که ارسال می کنید به شکل your_user_name @ your_domain خواهد بود ، که your_user_name نام کاربری کاربر سرور مجازی است که دستور را با آن اجرا کردید.
اکنون ایمیلی از سرور مجازی خود ارسال کرده اید و تأیید کرده اید که با موفقیت دریافت شده است. در مرحله بعدی ، فوروارد کردن ایمیل برای root را تنظیم می کنید.
مرحله 4 – سیستم فوروارد ایمیل
در این مرحله ، فوروارد ایمیل را برای کاربر root تنظیم می کنید ، بنابراین پیام های ایجاد شده در سیستم که روی سرور مجازی شما به آن ارسال میشود به یک آدرس ایمیل خارجی فوروارد می شوند.
فایل / etc / aliases شامل لیستی از نام های جایگزین برای گیرندگان ایمیل است. آن را برای ویرایش باز کنید:
⦁ $ sudo nano /etc/aliases
⦁
در حالت پیش فرض ، اینگونه خواهد بود:
/etc/aliases
# See man 5 aliases for format
postmaster: root

تنها دستورالعمل حاضر مشخص می کند که ایمیل های تولید شده توسط سیستم به root ارسال می شوند.
خط زیر را به انتهای فایل اضافه کنید:
/etc/aliases
…
root: your_email_address

با این خط ، مشخص می کنید که ایمیل های ارسالی برای root ارسال می شوند به یک آدرس ایمیل فوروارد شوند. به یاد داشته باشید که your_email_address را با آدرس ایمیل شخصی خود جایگزین کنید. وقتی کارتان تمام شد ، فایل را ذخیره کنید و ببندید.
برای اعمال اثر ، دستور زیر را اجرا کنید:
⦁ $ sudo newaliases
⦁
اجرای newaliases ، یک پایگاه داده از نامهای مستعار میسازد که فرمان mail از آن استفاده می کند ، و از فایل پیکربندی که اخیراً ویرایش کرده اید گرفته شده است.
با اجرای دستور زیر ارسال ایمیل به root را آزمایش کنید:
⦁ $ echo “This is the body of the email” | mail -s “This is the subject line” root

باید ایمیل را در آدرس ایمیل خود دریافت کنید. اگر در آنجا نبود ، پوشه اسپم خود را بررسی کنید.
در این مرحله ، پیام های ایجاد شده توسط سیستم را به آدرس ایمیل خود فوروارد کرده اید. اکنون رمزگذاری پیام را فعال خواهید کرد ، به گونه ای که تمام ایمیلهایی که سرور مجازی شما ارسال می کند در برابر دستکاری در انتقال مصون باشند و به صورت قانونی تر بررسی شوند.
مرحله 5 – فعال کردن رمزگذاری SMTP
اکنون با درخواست یک گواهی TLS رایگان از Let’s Encrypt برای دامنه خود (با استفاده از Certbot) و پیکربندی Postfix برای استفاده در هنگام ارسال پیام ، رمزگذاری SMTP را فعال می کنید.
اوبونتو شامل Certbot در مخزن بسته پیش فرض خود میباشد ، اما ممکن است به روز نباشد. در عوض ، با اجرای دستور زیر مخزن رسمی را اضافه خواهید کرد:
⦁ $ sudo apt install certbot

⦁
وقتی از شما خواسته شد که تایید کنید ، ENTER را فشار دهید. سپس حافظه نهان پکیج منیجر سرور مجازی خود را به روز کنید:
به عنوان بخشی از ستاپ اولیه سرور مجازی در پیش نیازها ، ufw ، فایروال کامپایل نشده را نصب کردید. برای اجازه دادن به پورت HTTP 80 ، باید آن را پیکربندی کنید ، تا تأیید صحت دامنه انجام شود. دستور زیر را برای فعال کردن آن اجرا کنید:
⦁ $ sudo ufw allow 80
⦁
خروجی به شرح زیر خواهد بود:
Output
Rule added
Rule added (v6)

اکنون که پورت باز است ، Certbot را اجرا کنید تا مجوز را دریافت کنید:
⦁ $ sudo certbot certonly –standalone –rsa-key-size 4096 –agree-tos –preferred-challenges http -d your_domain
⦁

این دستور به Certbot میگوید گواهینامه هایی با کلید RSA و اندازه4096 بیت ، برای اجرای یک وب سرور مجازی مستقل موقت (–standalone) برای تأیید، و بررسی از طریق پورت 80 (–preferred-challenges http) صادر کند. به یاد داشته باشید که قبل از اجرای دستور ، your_domain را با دامنه خود جایگزین کنید و در صورت درخواست آدرس ایمیل خود را وارد کنید.
خروجی مشابه این خواهد بود:
Output
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator standalone, Installer None
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for `your_domain`
Waiting for verification…
Cleaning up challenges

IMPORTANT NOTES:
– Congratulations! Your certificate and chain have been saved at:
/etc/letsencrypt/live/your_domain/fullchain.pem
Your key file has been saved at:
/etc/letsencrypt/live/your_domain/privkey.pem
Your cert will expire on 2020-07-11. To obtain a new or tweaked
version of this certificate in the future, simply run certbot
again. To non-interactively renew *all* of your certificates, run
“certbot renew”
– If you like Certbot, please consider supporting our work by:

Donating to ISRG / Let’s Encrypt: https://letsencrypt.org/donate
Donating to EFF: https://eff.org/donate-le

همانطور که در یادداشت ها نوشته شده ، گواهینامه و فایل کلید خصوصی شما تحت / etc / letsencrypt / live / your_domain ذخیره شده اند.
اکنون که گواهینامه خود را دارید ،main.cf را برای ویرایش باز کنید:
⦁ $ sudo nano /etc/postfix/main.cf
⦁
بخش زیر را پیدا کنید:
/etc/postfix/main.cf
# TLS parameters
smtpd_tls_cert_file=/etc/ssl/certs/ssl-cert-snakeoil.pem
smtpd_tls_key_file=/etc/ssl/private/ssl-cert-snakeoil.key
smtpd_tls_security_level=may

smtp_tls_CApath=/etc/ssl/certs
smtp_tls_security_level=may
smtp_tls_session_cache_database = btree:${data_directory}/smtp_scache

آن را اصلاح کنید تا اینگونه به نظر برسد، هر جا نیاز بود، your_domain را با دامنه خود جایگزین کنید تا تنظیمات TLS برای Postfix به روز شود:
/etc/postfix/main.cf
# TLS parameters
smtpd_tls_cert_file=/etc/letsencrypt/live/your_domain/fullchain.pem
smtpd_tls_key_file=/etc/letsencrypt/live/your_domain/privkey.pem
smtpd_tls_security_level=may

smtp_tls_CApath=/etc/ssl/certs
smtp_tls_security_level=may
smtp_tls_session_cache_database = btree:${data_directory}/smtp_scache

پس از اتمام کار ، فایل را ذخیره کنید و ببندید.
با راه اندازی مجدد Postfix ، تغییرات را اعمال کنید:
⦁ $ sudo systemctl restart postfix
⦁
اکنون ، دوباره ایمیل بفرستید:
⦁ $ echo “This is the body of an encrypted email” | mail -s “This is the subject line” your_email_address
⦁
سپس ، آدرس ایمیل ارائه شده را بررسی کنید. این امکان وجود دارد که فوراً پیام را در صندوق ورودی خود مشاهده کنید ، زیرا ارائه دهندگان ایمیل احتمالاً پیام های بدون رمزگذاری را به عنوان اسپم علامت گذاری می کنند.
می توانید اطلاعات فنی مربوط به پیام ایمیل را در کلاینت خود بررسی کنید تا ببینید که این پیام در واقع رمزگذاری شده است.
نتیجه
اکنون یک سرور مجازی ایمیل صرفا ارسال کننده دارید ، که با Postfix تقویت می شود. رمزگذاری همه پیام های خروجی اولین قدم درست است تا ارائه دهندگان ایمیل پیام های شما را به صورت اسپم علامت گذاری نکنند. اگر این کار را در یک فرآیند توسعه انجام می دهید ، این اقدام کافی خواهد بود.
اما اگر مورد استفاده شما ارسال ایمیل به کاربران بالقوه سایت است (مانند ایمیل تأیید برای ثبت نام) ، باید به دنبال تنظیم سوابق SPF باشید ، تا ایمیل های سرور مجازیشما با احتمال بیشتری به صورت قانونی در نظر گرفته شوند.

برچسب‌ها:Postfix, Send-Only, سرور SMTP

۰ نظر

behnam gol mohamadi

نحوه نصب وردپرس در اوبونتو 20.04 با پشته LAMP

۵ مرداد۹۹

وردپرس یک فناوری منبع باز بسیار محبوب برای ساخت وب سایت و وبلاگ در اینترنت است. 63٪ کل وب سایتهایی که سیستم مدیریت محتوا (CMS) دارند و 36% از سایت هایی که هم اکنون آنلاین هستند از وردپرس استفاده می کنند.
روشهای مختلف زیادی برای دسترسی به وردپرس وجود دارد و برخی از مراحل تنظیمات پیچیده تر از سایر ستاپ ها هستند. این آموزش برای افرادی در نظر گرفته شده است که مایل به نصب و اجرای یک نمونه وردپرس در یک سرور مجازی ابری مدیریت نشده از طریق خط فرمان هستند. گرچه این روش به مراحل بیشتری نسبت به نصب وردپرس آماده نیاز دارد ، اما به ادمین ها کمک میکند کنترل بیشتری بر محیط وردپرس خود داشته باشند.
بسته به نیاز و اهداف خود ، ممکن است گزینه های دیگری پیدا کنید که مناسب تر باشد. وردپرس به عنوان یک نرم افزار منبع باز ، می تواند به صورت رایگان دانلود و نصب شود ، اما برای در دسترس بودن در وب ، به احتمال زیاد نیاز به خرید زیرساخت های ابری و یک نام دامنه دارید. اگر می خواهید از طریق نصب سمت سرور مجازی و راه اندازی سایت وردپرس کار کنید ، این راهنما را دنبال کنید.
این آموزش با استفاده از پشته LAMP (لینوکس ، Apache ، MySQL و PHP) خواهد بود که یکی از گزینه های معماری سرور مجازی است که با سیستم عامل لینوکس ، سرور مجازی وب Apache ، پایگاه داده MySQL و زبان برنامه نویسی PHP از وردپرس پشتیبانی می کند. وردپرس را از طریق LAMP روی سرور مجازی لینوکس اوبونتو 20.04 نصب و تنظیم خواهیم کرد.
پیش نیازها
برای تکمیل این آموزش ، به سرور مجازی اوبونتو 20.04 نیاز دارید و قبل از شروع این راهنما باید این مراحل را انجام دهید:
• با پیروی از راهنمای تنظیم اولیه سرور مجازی Ubuntu 20.04 سرور مجازی خود را تنظیم کنید و از داشتن کاربر سودو غیر ریشه اطمینان حاصل کنید.
• یک پشته LAMP را با دنبال کردن راهنمای LAMP ما برای نصب و پیکربندی این نرم افزار نصب کنید.
• سایت خود را ایمن کنید: وردپرس ورود کاربر را در نظر می گیرد و داده های کاربر را ذخیره می کند ، بنابراین داشتن یک لایه امنیتی برای آن مهم است. TLS / SSL فناوری است که به شما امکان می دهد ترافیک سایت خود را رمزگذاری کنید تا ارتباط شما و کاربران تان ایمن باشد. در اینجا دو گزینه برای رفع این نیاز در دسترس شماست:
o اگر نام دامنه دارید … می توانید سایت خود را با Let’s Encrypt که دارای گواهی نامه های رایگان و قابل اعتماد است ، ایمن کنید. برای تنظیم این برنامه ، راهنمای رمزگذاری ما را برای Apache دنبال کنید.
o اگر دامنه ندارید … و فقط از این پیکربندی برای آزمایش یا استفاده شخصی استفاده می کنید ، می توانید به جای آن از یک گواهی خود امضا شده استفاده کنید. این همان رمزگذاری را ارائه می دهد اما بدون اعتبار دامنه. برای راه اندازی Apache ، راهنمای SSL خود امضا شده ما را دنبال کنید.
پس از اتمام مراحل راه اندازی ، به عنوان کاربر sudo خود وارد سرور مجازی خود شوید و ادامه دهید.
مرحله 1 – ایجاد یک پایگاه داده MySQL و کاربر برای وردپرس
اولین قدمی که برداریم مرحله مقدماتی است. وردپرس از MySQL برای مدیریت و ذخیره اطلاعات سایت و کاربر استفاده می کند. ما MySQL را قبلاً نصب کرده ایم ، اما برای استفاده از وردپرس باید یک بانک اطلاعاتی و یک کاربر ایجاد کنیم.
برای شروع کار ، با صدور این دستور وارد حساب root (ادمین) MySQL شوید (توجه داشته باشید که این کاربر اصلی سرور مجازی شما نیست):
$ mysql -u root -p
هنگام نصب نرم افزار ، گذرواژه ای که برای حساب ریشه MySQL تعیین کرده اید ، از شما خواسته می شود.
توجه: اگر نمی توانید از طریق root به پایگاه داده MySQL خود دسترسی پیدا کنید ، به عنوان یک کاربر سودو می توانید با ورود به پایگاه داده مانند زیر ، رمز ورود کاربر اصلی خود را به روز کنید:
$ sudo mysql -u root
پس از دریافت اعلان MySQL ، می توانید رمز ورود کاربر root را به روز کنید. در اینجا new_password را با گذرواژه قوی به انتخاب خود جایگزین کنید.
Mysql> ALTER USER ‘root’@’localhost’ IDENTIFIED WITH mysql_native_password BY ‘new_password’;
اکنون می توانید EXIT را تایپ کنید. و می توانید از طریق رمز با دستور زیر وارد پایگاه داده شوید:
$ mysql -u root -p
در داخل بانک اطلاعاتی ، می توانیم یک پایگاه داده اختصاصی برای کنترل وردپرس ایجاد کنیم. شما می توانید این را هر چیزی بنامید ، اما ما در این راهنما از اسم wordpress استفاده خواهیم کرد. دیتابیس را برای وردپرس با تایپ کردن دستور زیر ایجاد کنید:
Mysql> CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
توجه: هر عبارت MySQL باید به علامت (؛) ختم شود. اگر به مشکلی برخورد کردید مطمئن شوید که این موضوع رعایت شده است.
در مرحله بعد ، قصد داریم یک حساب کاربری MySQL جداگانه ایجاد کنیم که بطور انحصاری برای کار با بانک اطلاعاتی جدید خود استفاده خواهیم کرد. ایجاد بانکهای اطلاعاتی و حسابهای خاص می تواند ما را از منظر مدیریتی و امنیتی پشتیبانی کند. ما در این راهنما از اسم wordpressuser استفاده خواهیم کرد ، اما به راحتی میتوانید از هر اسمی که میخواهید استفاده کنید.
ما قصد داریم این حساب را ایجاد کنیم ، رمزعبور تنظیم کنیم و به دیتابیس ایجاد شده دسترسی پیدا کنیم. می توانیم با تایپ دستور زیر این کار را انجام دهیم. به یاد داشته باشید یک رمزعبور قوی را برای کاربر پایگاه داده خود در جایی که گذرواژه داریم انتخاب کنید:
Mysql> CREATE USER ‘wordpressuser’@’%’ IDENTIFIED WITH mysql_native_password BY ‘password’;
در مرحله بعد ، به دیتابیس اطلاع دهید که وردپرس ما باید به پایگاه داده ای که تنظیم کرده ایم دسترسی کامل داشته باشد:
Mysql> GRANT ALL ON wordpress.* TO ‘wordpressuser’@’%’;
اکنون یک بانک اطلاعاتی و یک حساب کاربری دارید که هر کدام بطور خاص برای وردپرس ساخته شده اند. باید امتیازات را به گونه‌ای فلاش کنیم که نمونه فعلی MySQL در مورد تغییرات اخیر ما مطلع شود:
Mysql> FLUSH PRIVILEGES;
با تایپ کردن از MySQL خارج شوید:
Mysql> EXIT;
در مرحله بعد ، با دانلود برنامه های افزودنی PHP برای سرور مجازی ، چند پایه را برای افزونه های WordPress قرار خواهیم داد.
مرحله 2 – نصب افزونه های اضافی PHP
هنگام تنظیم پشته LAMP ، فقط به مجموعه ای اندک از افزونه ها نیاز داریم تا بتوانیم PHP را با MySQL مرتبط کنیم. WordPress و بسیاری از افزونه های آن از پسوندهای PHP اضافی استفاده می کنند.
می توانیم با تایپ کردن دستورات زیر، برخی از محبوب ترین افزونه های PHP برای استفاده با وردپرس را دانلود و نصب کنیم:
⦁ $ sudo apt update
⦁
⦁ $ sudo apt install php-curl php-gd php-mbstring php-xml php-xmlrpc php-soap php-intl php-zip
⦁
این امر زمینه ساز نصب افزونه های اضافی در سایت وردپرس ما خواهد بود.
توجه: هر افزونه وردپرس مجموعه ای از الزامات خاص خود را دارد. بعضی از آنها ممکن است نیاز به نصب بسته های PHP اضافی داشته باشند. اسناد پلاگین خود را بررسی کنید تا الزامات PHP آن را پیدا کنید. در صورت موجود بودن ، همانطور که در بالا نشان داده شده است ، می توان آنها را نصب کرد.

برای دانلود این برنامه های افزودنی جدید ، باید apache را ریستارت کنیم ، در قسمت بعدی پیکربندی های بیشتری را روی Apache انجام خواهیم داد ، بنابراین می توانید تا آن زمان صبر کنید ، یا اکنون ریستارت کنید تا مراحل پسوند PHP انجام شود.
$ sudo systemctl restart apache2

مرحله 3 – تنظیم پیکربندی apache برای اجازه جهت لغو و بازنویسی .htaccess
در مرحله بعد ، ما در تنظیمات apache چند تعدیل جزئی انجام خواهیم داد. بر اساس آموزش های پیش نیاز ، باید یک فایل پیکربندی برای سایت خود در دیرکتوری / etc / apache2 / sites-available / داشته باشید.
در این راهنما ، از /etc/apache2/sites-available/wordpress.conf به عنوان نمونه در اینجا استفاده خواهیم کرد ، اما شما باید مسیر فایل پیکربندی خود را هر جا که مناسب باشد جایگزین کنید. علاوه بر این ، ما از / var / www / wordpress به عنوان دیرکتوری اصلی نصب وردپرس استفاده خواهیم کرد. شما باید از ریشه وب مشخص شده در پیکربندی خود استفاده کنید. اگر از آموزش LAMP ما پیروی کرده باشید ، ممکن است در هر دو مورد ، به جای وردپرس ، نام دامنه شما وجود داشته باشد.
توجه: این امکان وجود دارد که شما از پیکربندی پیش فرض 000-default.conf (با / var / www / html به عنوان ریشه وب خود) استفاده کنید. اگر فقط میزبان یک وب سایت در این سرور مجازی هستید ، مناسب خواهد بود. در غیر این صورت ، بهتر است پیکربندی لازم را در بخش های منطقی ، در یک فایل در هر سایت تقسیم کنید.
با شناسایی مسیرهای خود ، می توانیم به سراغ کار با .htaccess برویم تا Apache بتواند تغییرات پیکربندی را بر اساس هر دیرکتوری انجام دهد.
فعال کردن لغو .htaccess
در حال حاضر ، استفاده از فایل های .htaccess غیرفعال است. وردپرس و بسیاری از افزونه های وردپرس از این فایل ها به طور گسترده برای ترفندهای درون دایرکتوری نسبت به رفتار سرور مجازی وب استفاده می کنند.
فایل پیکربندی Apache را برای وب سایت خود با ویرایشگر متن مانند nano باز کنید.
$ sudo nano /etc/apache2/sites-available/wordpress.conf
برای اجازه به فایل های .htaccess ، باید دستورالعمل AllowOverride را در یک بلوک دیرکتوری قرار دهیم که به ریشه سند ما اشاره دارد. مطمئن شوید که از دیرکتوری درست ریشه وب استفاده کنید ، بلوک متن زیر را در داخل بلوک VirtualHost اضافه کنید:
/etc/apache2/sites-available/wordpress.conf
<Directory /var/www/wordpress/>
AllowOverride All
</Directory>

پس از اتمام ، فایل را ذخیره کنید وببندید. در nano ، می توانید این کار را با فشار دادن CTRL و X با هم ، سپس Y ، و ENTER انجام دهید.
فعال کردن ماژول بازنویسی
در مرحله بعد می توانیم mod_rewrite را فعال کنیم تا بتوانیم از ویژگی permalink WordPress استفاده کنیم:
$ sudo a2enmod rewrite
این امر به شما امکان می دهد ، مانند دو مثال زیر ، permalink های خواناتری برای افراد داشته باشید:
http://example.com/2012/post-name/
http://example.com/2012/12/30/post-name
دستور a2enmod اسکریپتی را فراخوانی می کند که ماژول مشخص شده را در پیکربندی Apache فعال می کند.
فعال کردن تغییرات
قبل از اجرای تغییراتی که ایجاد کرده ایم ، با انجام آزمایش زیر بررسی کنید که هیچگونه خطای نحوی مرتکب نشده ایم.
$ sudo apache2ctl configtest
ممکن است خروجی مانند زیر دریافت کنید:
Output
AH00558: apache2: Could not reliably determine the server’s fully qualified domain name, using 127.0.1.1. Set the ‘ServerName’ directive globally to suppress this message
Syntax OK
اگر می خواهید خط بالا را لغو کنید ، کافی است یک دستورالعمل ServerName را به فایل اصلی (جهانی) پیکربندی آپاچی خود در /etc/apache2/apache2.conf اضافه کنید. نام سرور مجازی می تواند دامنه یا آدرس IP سرور مجازی شما باشد. با این حال این فقط یک پیام است و بر عملکرد سایت شما تأثیر نمی گذارد. تا زمانی که خروجی شامل Syntax OK باشد ، میتوانید ادامه دهید.
برای اجرای تغییرات Apache را ریستارت کنید. حتماً دوباره راه اندازی کنید حتی اگر قبلا در این آموزش ریستارت شده باشد.
$ sudo systemctl restart apache2
در مرحله بعد ، خود وردپرس را دانلود و تنظیم خواهیم کرد.
مرحله 4 – دانلود وردپرس
اکنون که پیکربندی نرم افزار سرور مجازی ما انجام شده است ، می توانیم WordPress را دانلود و تنظیم کنیم. به ویژه به دلایل امنیتی ، همیشه توصیه می شود آخرین نسخه وردپرس را از سایت آنها دریافت کنید.
به یک دیرکتوری قابل نوشتن بروید (یک نسخه موقت مانند / tmp را توصیه می کنیم) و نسخه فشرده شده را دانلود کنید.
⦁ $ cd /tmp
⦁
⦁ $ curl -O https://wordpress.org/latest.tar.gz
⦁
برای ایجاد ساختار دایرکتوری وردپرس ، فایل فشرده شده را اکسترکت کنید:
$ tar xzvf latest.tar.gz
ما این فایل ها را لحظه به لحظه به ریشه سند منتقل می کنیم. قبل از انجام این کار ، می توانیم یک فایل .htaccess ساختگی را اضافه کنیم تا این مورد در مرحله بعد برای استفاده وردپرس در دسترس باشد.
فایل را با تایپ کردن دستور زیر ایجاد کنید:
$ touch /tmp/wordpress/.htaccess
همچنین فایل پیکربندی نمونه را با نام فایل که WordPress می خواند ، کپی می کنیم:
$ cp /tmp/wordpress/wp-config-sample.php /tmp/wordpress/wp-config.php
همچنین می توانیم دایرکتوری upgrade را ایجاد کنیم ، به طوری که وردپرس هنگام تلاش برای انجام این کار به تنهایی به دنبال بروزرسانی در نرم افزار خود ، به مشکلات مربوط به مجوزها برخورد نکند:
$ mkdir /tmp/wordpress/wp-content/upgrade
اکنون می توانیم کل محتوای دیرکتوری را در ریشه سند خود کپی کنیم. در انتهای دایرکتوری منبع خود از یک نقطه استفاده می کنیم تا نشان دهد که همه چیزهایی که در این دیرکتوری قرار دارند باید کپی شوند ، از جمله فایل های مخفی (مانند فایل .htaccess که ایجاد کردیم):
$ sudo cp -a /tmp/wordpress/. /var/www/wordpress
اطمینان حاصل کنید که پوشه / var / www / wordpress را با دایرکتوری که در سرور مجازی خود تنظیم کرده اید جایگزین کنید.
مرحله 5 – پیکربندی دایرکتوری وردپرس
قبل از انجام تنظیمات وردپرس مبتنی بر وب ، باید برخی موارد را در دایرکتوری WordPress خود تنظیم کنیم.
تنظیم مالکیت و مجوزها
قدم مهمی که ما باید برداریم ، تنظیم مجوزهای مناسب و مالکیت فایل هاست.
با دادن مالکیت کلیه فایل ها به کاربر و گروه داده های www شروع خواهیم کرد. این کاربری است که وب سرور مجازی Apache به عنوان آن اجرا می شود و Apache برای سرویس دهی به وب سایت و انجام به روز رسانی های خودکار باید بتواند فایل های وردپرس را بخواند و بنویسد.
مالکیت را با دستور chown به روز کنید که به شما امکان می دهد مالکیت فایل را تغییر دهید. حتماً به دیرکتوری مربوطه سرور مجازی خود اشاره کنید.
$ sudo chown -R www-data:www-data /var/www/wordpress
در مرحله بعدی دو دستور find را برای تنظیم مجوزهای صحیح در دایرکتوری ها و فایل های وردپرس اجرا خواهیم کرد:
⦁ $ sudo find /var/www/wordpress/ -type d -exec chmod 750 {} \;
⦁
⦁ $ sudo find /var/www/wordpress/ -type f -exec chmod 640 {} \;
⦁
این مجوزها باید به شما اجازه دهد به طور مؤثر با وردپرس کار کنید ، اما توجه داشته باشید که برخی از افزونه ها و رویه ها ممکن است نیاز به ترفندهای بیشتری داشته باشند.
تنظیم فایل پیکربندی WordPress
حال باید تغییراتی در فایل اصلی پیکربندی وردپرس ایجاد کنیم.
با باز کردن فایل ، اولین کار ما تنظیم برخی کلیدهای مخفی برای فراهم آوردن سطح امنیتی برای نصب ما خواهد بود. WordPress یک مولد مطمئن برای این مقادیر فراهم می کند تا نیازی به تلاش برای دستیابی به مقادیر مناسب به تنهایی نباشد. اینها فقط در داخل مورد استفاده قرار می گیرند ، بنابراین استفاده از مقادیر پیچیده و ایمن در اینجا مشکلی ایجاد نخواهد کرد.
برای دریافت مقادیر ایمن از مولد کلید مخفی WordPress ، تایپ کنید:
$ curl -s https://api.wordpress.org/secret-key/1.1/salt/
مقادیر منحصر به فردی را که شبیه به خروجی مشابه بلوک زیر است ، به شما باز می گرداند.
هشدار! مهم است که هر بار مقادیر منحصر به فرد را درخواست کنید. مقادیر زیر را کپی نکنید!
Output
define(‘AUTH_KEY’, ‘1jl/vqfs<XhdXoAPz9 DO NOT COPY THESE VALUES c_j{iwqD^<+c9.k<J@4H’);
define(‘SECURE_AUTH_KEY’, ‘E2N-h2]Dcvp+aS/p7X DO NOT COPY THESE VALUES {Ka(f;rv?Pxf})CgLi-3’);
define(‘LOGGED_IN_KEY’, ‘W(50,{W^,OPB%PB<JF DO NOT COPY THESE VALUES 2;y&,2m%3]R6DUth[;88’);
define(‘NONCE_KEY’, ‘ll,4UC)7ua+8<!4VM+ DO NOT COPY THESE VALUES #`DXF+[$atzM7 o^-C7g’);
define(‘AUTH_SALT’, ‘koMrurzOA+|L_lG}kf DO NOT COPY THESE VALUES 07VC*Lj*lD&?3w!BT#-‘);
define(‘SECURE_AUTH_SALT’, ‘p32*p,]z%LZ+pAu:VY DO NOT COPY THESE VALUES C-?y+K0DK_+F|0h{!_xY’);
define(‘LOGGED_IN_SALT’, ‘i^/G2W7!-1H2OQ+t$3 DO NOT COPY THESE VALUES t6**bRVFSD[Hi])-qS`|’);
define(‘NONCE_SALT’, ‘Q6]U:K?j4L%Z]}h^q7 DO NOT COPY THESE VALUES 1% ^qUswWgn+6&xqHN&%’);

اینها خطوط پیکربندی هستند که می توانیم مستقیماً در فایل پیکربندی خود پیست کنید تا کلیدهای ایمن را تنظیم کنیم. خروجی را که اکنون دریافت کردید کپی کنید.
سپس ، فایل پیکربندی WordPress را باز کنید:
$ sudo nano /var/www/wordpress/wp-config.php
بخشی را پیدا کنید که حاوی مقادیر مثال برای آن تنظیمات است.
/var/www/wordpress/wp-config.php
. . .

define(‘AUTH_KEY’, ‘put your unique phrase here’);
define(‘SECURE_AUTH_KEY’, ‘put your unique phrase here’);
define(‘LOGGED_IN_KEY’, ‘put your unique phrase here’);
define(‘NONCE_KEY’, ‘put your unique phrase here’);
define(‘AUTH_SALT’, ‘put your unique phrase here’);
define(‘SECURE_AUTH_SALT’, ‘put your unique phrase here’);
define(‘LOGGED_IN_SALT’, ‘put your unique phrase here’);
define(‘NONCE_SALT’, ‘put your unique phrase here’);

. . .

آن سطرها را حذف کرده و مقادیری را که کپی کرده اید از خط فرمان پیست کنید:
/var/www/wordpress/wp-config.php
. . .

define(‘AUTH_KEY’, ‘VALUES COPIED FROM THE COMMAND LINE’);
define(‘SECURE_AUTH_KEY’, ‘VALUES COPIED FROM THE COMMAND LINE’);
define(‘LOGGED_IN_KEY’, ‘VALUES COPIED FROM THE COMMAND LINE’);
define(‘NONCE_KEY’, ‘VALUES COPIED FROM THE COMMAND LINE’);
define(‘AUTH_SALT’, ‘VALUES COPIED FROM THE COMMAND LINE’);
define(‘SECURE_AUTH_SALT’, ‘VALUES COPIED FROM THE COMMAND LINE’);
define(‘LOGGED_IN_SALT’, ‘VALUES COPIED FROM THE COMMAND LINE’);
define(‘NONCE_SALT’, ‘VALUES COPIED FROM THE COMMAND LINE’);

. . .

در مرحله بعد می خواهیم برخی از تنظیمات اتصال دیتابیس را در ابتدای فایل تغییر دهیم. شما باید نام پایگاه داده ، کاربر پایگاه داده و رمز عبور مرتبط با آن را در MySQL تنظیم کنید.
تغییر دیگری که ما باید انجام دهیم این است که روشی را که وردپرس باید برای نوشتن در سیستم فایل ها استفاده کند تنظیم کنیم. از آنجا که به سرور مجازی وب اجازه داده ایم هر جا که لازم است بنویسد، می توانیم صریحاً روش سیستم فایل را روی “مستقیم” تنظیم کنیم. عدم انجام این کار با تنظیمات فعلی ما منجر به درخواست اعتبارات FTP از سوی وردپرس در هنگام انجام برخی اقدامات می شود.
این تنظیمات می تواند در زیر تنظیمات اتصال دیتابیس یا هر جای دیگر فایل اضافه شود:
/var/www/wordpress/wp-config.php
. . .

// ** MySQL settings – You can get this info from your web host ** //
/** The name of the database for WordPress */
define( ‘DB_NAME’, ‘wordpress’ );

/** MySQL database username */
define( ‘DB_USER’, ‘wordpressuser’ );

/** MySQL database password */
define( ‘DB_PASSWORD’, ‘password’ );

/** MySQL hostname */
define( ‘DB_HOST’, ‘localhost’ );

/** Database Charset to use in creating database tables. */
define( ‘DB_CHARSET’, ‘utf8’ );

/** The Database Collate type. Don’t change this if in doubt. */
define( ‘DB_COLLATE’, ” );

. . .

define(‘FS_METHOD’, ‘direct’);

پس از اتمام فایل را ذخیره کنید و ببندید.
مرحله 6 – تکمیل نصب از طریق رابط وب
اکنون که پیکربندی سرور مجازی کامل شد ، می توانیم نصب را از طریق رابط وب انجام دهیم.
در مرورگر وب خود ، به نام دامنه سرور مجازی یا آدرس IP عمومی خود بروید:
https://server_domain_or_IP
زبانی را که می خواهید استفاده کنید انتخاب کنید:

در مرحله بعد ، به صفحه اصلی تنظیمات خواهید رسید.
یک نام برای سایت وردپرس خود و یک نام کاربری انتخاب کنید. توصیه می شود موارد منحصر به فردی را انتخاب کنید و از نامهای متداول مانند “ادمین” به خاطر اهداف امنیتی خودداری کنید. رمزعبور قوی به صورت خودکار ایجاد می شود. این رمز عبور را ذخیره کنید یا یک رمزعبور قوی دیگر را انتخاب کنید.
آدرس ایمیل خود را وارد کنید و انتخاب کنید که آیا می خواهید موتورهای جستجو را از ایندکس کردن سایت خود جدا کنید:

با کلیک بر روی صفحه ، به صفحه ای منتقل می شوید که از شما میخواهد وارد شوید:

پس از ورود به سیستم ، به داشبورد مدیریت وردپرس منتقل می شوید:

در این مرحله ، می توانید شروع به طراحی وب سایت وردپرس خود کنید! اگر اولین بار است که از WordPress استفاده می کنید ، کمی در رابط جستجو کنید تا با CMS جدید خود آشنا شوید.
نتیجه
اکنون WordPress نصب شده و آماده استفاده است!
در این مرحله میتوانید کارهای زیر را انجام دهید:
• تنظیمات پرمالینک های خود را برای پست های WordPress انتخاب کنید ، که در Settings > Permalinks یافت میشود.
• یک تم جدید در Appearance > Themes انتخاب کنید.
• در زیر Users > Add New افزونه های جدید را نصب کنید تا عملکرد سایتتان افزایش یابد.
• اگر می خواهید با دیگران همکاری کنید ، میتوانید اکنون کاربران دیگری را نیز تحت Users > Add New اضافه کنید.
می توانید منابع دیگری را به عنوان راه های جایگزین برای نصب وردپرس بیابید ، یاد بگیرید چگونه وردپرس را در توزیع سرور مجازی های مختلف نصب کنید، نصب های وردپرس خود را اتوماتیک کنید و سایت های وردپرس خود را با بررسی کردن برچسب انجمن وردپرس مقایسه کنید.

برچسب‌ها:LAMP

۰ نظر

behnam gol mohamadi

قدیمی ترین مطالب مطالب قدیمی تر

جدیدترین مطالب مطالب جدید تر