ایا معمار نرم افزار هستید؟
....
Becoming a software architect isn't something that simply happens overnight or with a promotion. It's a role , not a rank . It's an evolutionary process where you'll gradually gain the experience and confidence that you need to undertake the role.
خسته نباشید
من توی سایتم از ajax استفاده کردم و برای حذف یه رکورد اول از کاربر تاییدیه گرفتم . اگه کاربر روی دکمهی بله کلیک کنه ، عملیات شروع میشه و رکورد حذف میشه .
آخر سر توی تابعی که نتیجه برمیگرده توش (handleServerResponse)، بر اساس نتیجهی برگشتی پیغام مناسبی بایدنمایش داده بشه. اما هیچ پیغامی نشون داده نمیشه
خیلی چیزا رو آزمایش کردم و آخر سر به این نتیجه رسیدم که چون دو تا پیغام میخواد پشت سر هم نمایش داده بشه ، این مشکل پیش میاد :(
حتی وقتی که پیغام تایید حذف رو برداشتم ، دیدم که پیغام دوم میاد !
واااقعا نمیدونم علتش چیه ! ممنون میشم کمکم کنید.
اینم قسمتی از کدمه :
function deleteFile(location, filename)//حذف فیزیکی و منطقی فایل { $.prompt("آیا برای حذف فایل موجود اطمینان دارید ؟", { title: '<img src="Images/warning.png" />', buttons: { "بله": true, "خیر": false }, focus: 2, submit: function (e, v, m, f) { if (v == true) { var getdate = new Date(); //Used to prevent caching during ajax call if (xmlhttp) { $("p#vtip").fadeOut("slow").remove(); //محو شدن tooltip var id = document.getElementById("id").value; var i = '3'; params = "id=" + id + "&i=" + i + "&filename=" + filename + "&location=" + location; xmlhttp.open("POST", "FetchData/dbSearchDocument1.php", true); xmlhttp.onreadystatechange = handleServerResponse4; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(params); } } else { } } }); } //----------------------------------------------------------------------- function handleServerResponse4() { if ((xmlhttp.readyState == 1) || (xmlhttp.readyState == 2) || (xmlhttp.readyState == 3))//loading { document.getElementById("content").innerHTML = "<img src='Images/bigloading.gif'/>"; } else if (xmlhttp.readyState == 4) //ready { if (xmlhttp.status == 200) { if (xmlhttp.responseText == 1) { $.prompt(". حذف فایل با موفقیت انجام شد ", { title: '<img src="Images/warning3.png" />', buttons: { "بستن": true } }); } else { $.prompt("! حذف فایل با خطا مواجه شده است", { title: '<img src="Images/warning2.png" />', buttons: { "بستن": true } }); } } else { alert("Error during AJAX call. Please try again"); } } } //-----------------------------------------------------------------------
با توجه به اینکه React یک سیستم متشکل از کامپوننتهای کوچک و بزرگ است و از JSX جهت کدنویسی استفاده میکند و یک قالب HTML، متشکل از تمام عناصر به صورت درهم ریخته میباشد و بخشهای مختلفی دارد، امکان استفادهی مستقیم از قالب HTML در آن وجود ندارد و باید با فرمت React همخوانی داشته باشد. من در اینجا از قالب رایگان و راستچین شده AdminLTE که بر پایه بوت استرپ 4 میباشد استفاده کردهام.
همانطور که میدانید React پوشهای را به نام public، مهیا کردهاست که برای استفادهی عمومی از فایلهای استاتیک ایجاد شدهاست. پس ابتدا فایلهای js,css، تصاویر و دیگر فایلهای استاتیک را به پوشهی public منتقل میکنیم. سپس فایل index قالب را باز کرده و به تگ header فایل مراجعه کنید. تگهای لینکهای معرفی فایلهای css و script ای را که در آن تعریف شدهاند، کپی کرده به هدر فایل index.html که در پوشهی public قرار دارد، منتقل کنید. همچنین از فایلهای اسکرپیت دیگر که در پایین تگ Body قرار گرفتهاند، غافل نگردید.
در اینجا باید بخشهای اساسی قالب، همانند navbar و sidebar را به صورت کامپوننت ایجاد کنیم.
پس ابتدا یک کامپوننت NavBar.jsx را ایجاد کرده و کدهای همین قسمت را در متد render قرار میدهیم:
import React, { Component } from "react";
class NavBar extends Component {
state = {};
render() {
return (
<React.Fragment>
<nav>
<!-- Left navbar links -->
<ul>
<li>
<a data-widget="pushmenu" href="#"><i></i></a>
</li>
<li>
<a href="index3.html">خانه</a>
</li>
<li>
<a href="#">تماس</a>
</li>
</ul>
<!-- SEARCH FORM -->
<form>
<div>
<input type="search" placeholder="جستجو" aria-label="Search">
<div>
<button type="submit">
<i></i>
</button>
</div>
</div>
</form>
...
</nav>
</React.Fragment>
);
}
}
export default NavBar;
- تمامی کامنتهای موجود در فایل را حذف کنید.
- تمام تگها که شامل خصوصیت class هستند را با استفاده از ابزار جستجو، یافته و با عبارت className جایگزین کنید.
- در صورتیکه روی تگها از خصوصیت style استفاده کردهاید، به شکل زیر ویرایش کرده و قالب jsx را روی آن پیاده کنید.
style="opacity:0.8;"
style={{ opacity: "0.8" }}
- در صورتیکه از تگهای img و یا input استفاده میکنید، حتما باید انتها تگها به شکل زیر بسته شده باشند:
<input type="search" placeholder="جستجو" aria-label="Search">
<input className="form-control form-control-navbar" type="search" placeholder="جستجو" aria-label="Search" />
import React, { Component } from "react"; class NavBar extends Component { state = {}; render() { return ( <React.Fragment> <nav className="main-header navbar navbar-expand bg-white navbar-light border-bottom"> <ul className="navbar-nav"> <li className="nav-item"> <a className="nav-link" data-widget="pushmenu" href="#"> <i className="fa fa-bars"></i> </a> </li> <li className="nav-item d-none d-sm-inline-block"> <a href="index3.html" className="nav-link"> خانه </a> </li> <li className="nav-item d-none d-sm-inline-block"> <a href="#" className="nav-link"> تماس </a> </li> </ul> <form className="form-inline ml-3"> <div className="input-group input-group-sm"> <input className="form-control form-control-navbar" type="search" placeholder="جستجو" aria-label="Search" /> <div className="input-group-append"> <button className="btn btn-navbar" type="submit"> <i className="fa fa-search"></i> </button> </div> </div> </form> ... </nav> </React.Fragment> ); } } export default NavBar;
return ( <React.Fragment> <NavBar /> <SideBar /> <div className="content-wrapper" style={{ marginTop: "20px" }}> <DomainList /> </div> <Footer /> </React.Fragment> )
مراحل تنظیم Let's Encrypt در IIS
یک نکتهی تکمیلی
ACME V1 تا چند ماه دیگر به پایان خواهد رسید:In June of 2020 we will stop allowing new domains to validate via ACMEv1.
A simple Windows ACMEv2 client (WACS) Software version 2.1.3.671 (RELEASE, PLUGGABLE) IIS version 7.5 Running with administrator credentials Scheduled task not configured yet Please report issues at https://github.com/PKISharp/win-acme N: Create new certificate (simple for IIS) M: Create new certificate (full options) L: List scheduled renewals R: Renew scheduled S: Renew specific A: Renew *all* O: More options... Q: Quit Please choose from the menu: m Running in mode: Interactive, Advanced Please specify how the list of domain names that will be included in the certificate should be determined. If you choose for one of the "all bindings" options, the list will automatically be updated for future renewals to reflect the bindings at that time. 1: IIS 2: Manual input 3: CSR created by another program C: Abort How shall we determine the domain(s) to include in the certificate?: 1 Please select which website(s) should be scanned for host names. You may input one or more site identifiers (comma separated) to filter by those sites, or alternatively leave the input empty to scan *all* websites. 1: Default Web Site (2 bindings) Site identifier(s) or <ENTER> to choose all: 1 1: dotnettips.info (Site 1) 2: www.dotnettips.info (Site 1) You may either choose to include all listed bindings as host names in your certificate, or apply an additional filter. Different types of filters are available. 1: Pick specific bindings from the list 2: Pick bindings based on a search pattern 3: Pick bindings based on a regular expression 4: Pick *all* bindings How do you want to pick the bindings?: 4 1: dotnettips.info (Site 1) 2: www.dotnettips.info (Site 1) Please pick the most important host name from the list. This will be displayed to your users as the subject of the certificate. Common name: 2 1: dotnettips.info (Site 1) 2: www.dotnettips.info (Site 1) Continue with this selection? (y*/n) - yes Target generated using plugin IIS: www.dotnettips.info and 1 alternatives Suggested friendly name '[IIS] Default Web Site, (any host)', press <ENTER> to accept or type an alternative: <Enter> The ACME server will need to verify that you are the owner of the domain names that you are requesting the certificate for. This happens both during initial setup *and* for every future renewal. There are two main methods of doing so: answering specific http requests (http-01) or create specific dns records (dns-01). For wildcard domains the latter is the only option. Various additional plugins are available from https://github.com/PKISharp/win-acme/. 1: [http-01] Save verification files on (network) path 2: [http-01] Serve verification files from memory (recommended) 3: [http-01] Upload verification files via FTP(S) 4: [http-01] Upload verification files via SSH-FTP 5: [http-01] Upload verification files via WebDav 6: [dns-01] Create verification records manually (auto-renew not possible) 7: [dns-01] Create verification records with acme-dns (https://github.com/joohoi/acme-dns) 8: [dns-01] Create verification records with your own script 9: [tls-alpn-01] Answer TLS verification request from win-acme C: Abort How would you like prove ownership for the domain(s) in the certificate?: 2 After ownership of the domain(s) has been proven, we will create a Certificate Signing Request (CSR) to obtain the actual certificate. The CSR determines properties of the certificate like which (type of) key to use. If you are not sure what to pick here, RSA is the safe default. 1: Elliptic Curve key 2: RSA key What kind of private key should be used for the certificate?: 2 When we have the certificate, you can store in one or more ways to make it accessible to your applications. The Windows Certificate Store is the default location for IIS (unless you are managing a cluster of them). 1: IIS Central Certificate Store (.pfx per domain) 2: PEM encoded files (Apache, nginx, etc.) 3: Windows Certificate Store C: Abort How would you like to store the certificate?: 3 1: IIS Central Certificate Store (.pfx per domain) 2: PEM encoded files (Apache, nginx, etc.) 3: No additional storage steps required C: Abort Would you like to store it in another way too?: 3 With the certificate saved to the store(s) of your choice, you may choose one or more steps to update your applications, e.g. to configure the new thumbprint, or to update bindings. 1: Create or update https bindings in IIS 2: Create or update ftps bindings in IIS 3: Start external script or program 4: Do not run any (extra) installation steps Which installation step should run first?: 1 Use different site for installation? (y/n*) - no 1: Create or update ftps bindings in IIS 2: Start external script or program 3: Do not run any (extra) installation steps Add another installation step?: 3 Enter email(s) for notifications about problems and abuse (comma seperated): name@site.com Terms of service: C:\ProgramData\win-acme\acme-v02.api.letsencrypt.org\LE-SA-v1.2-November-15-2017.pdf Open in default application? (y/n*) - no Do you agree with the terms? (y*/n) - yes Authorize identifier: dotnettips.info Authorizing dotnettips.info using http-01 validation (SelfHosting) Authorization result: valid Authorize identifier: www.dotnettips.info Authorizing www.dotnettips.info using http-01 validation (SelfHosting) Authorization result: valid Requesting certificate [IIS] Default Web Site, (any host) Store with CertificateStore... Installing certificate in the certificate store Adding certificate [IIS] Default Web Site, (any host) @ 2020/2/1 9:43:55 to store My Installing with IIS... Updating existing https binding www.dotnettips.info:443 (flags: 0) Updating existing https binding dotnettips.info:443 (flags: 0) Committing 2 https binding changes to IIS Adding Task Scheduler entry with the following settings - Name win-acme renew (acme-v02.api.letsencrypt.org) - Path C:\Programs\win-acme.v2.1.3.671.x64.pluggable - Command wacs.exe --renew --baseuri "https://acme-v02.api.letsencrypt.org/" - Start at 09:00:00 - Time limit 02:00:00 Do you want to specify the user the task will run as? (y/n*) - no
ویجتهای وب Kendo UI مجموعهای از کنترلهای سفارشی HTML 5 هستند که برفراز jQuery تهیه شدهاند. این کنترلها برای برنامههای وب و همچنین برنامههای دسکتاپ لمسی طراحی شدهاند.
بهترین روش برای مشاهدهی این مجموعه، مراجعه به فایل examples\index.html پوشهی اصلی Kendo UI است که لیست کاملی از این ویجتها را به همراه مثالهای مرتبط ارائه میدهد. تعدادی از اعضای این مجموعه شامل کنترلهای ذیل هستند:
Window, TreeView, Tooltip, ToolBar, TimePicker, TabStrip, Splitter, Sortable, Slider, Gantt, Scheduler, ProgressBar, PanelBar, NumericTextBox, Notification, MultiSelect, Menu, MaskedTextBox, ListView, PivotGrid, Grid, Editor, DropDownList, DateTimePicker, DatePicker, ComboBox, ColorPicker, Calendar, Button, AutoComplete
نحوهی استفاده کلی از ویجتهای وب Kendo UI
با توجه به اینکه کنترلهای Kendo UI مبتنی بر jQuery هستند، نحوهی استفاده از آنها، مشابه سایر افزونههای جیکوئری است. ابتدا المانی به صفحه اضافه میشود:
<input id="pickDate" type="text"/>
<script type="text/javascript"> $(function() { $("#pickDate").kendoDatePicker(); }); </script>
<input id="dateOfBirth" type="text" data-role="datepicker" />
برای فعال سازی حالت declarative initialization باید به دو نکتهی مهم دقت داشت:
الف) در مطلب معرفی Kendo UI اسکریپتهای ذیل برای آماده سازی Kendo Ui معرفی شدند:
<!--KendoUI: Web--> <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.web.min.js" type="text/javascript"></script> <!--KendoUI: DataViz--> <link href="styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" /> <script src="js/kendo.dataviz.min.js" type="text/javascript"></script> <!--KendoUI: Mobile--> <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.all.min.js" type="text/javascript"></script>
یک مثال کامل:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.all.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#pickDate").kendoDatePicker(); }); $(function () { // initialize any widgets in the #container div kendo.init($("#container")); }); </script> </head> <body> <span> Pick a date: <input id="pickDate" type="text" /> </span> <div id="container"> <input id="dateOfBirth" type="text" data-role="datepicker" /> <div id="colors" data-role="colorpalette" data-columns="4" data-tile-size="{ width: 34, height: 19 }"></div> </div> </body> </html>
- در اینجا pickDate به صورت معمولی فعال شدهاست.
- اما در قسمت kendo.init نام یک ناحیه یا نام یک کنترل را میتوان ذکر کرد. برای مثال در اینجا کل ناحیهی مشخص شده توسط یک div با id مساوی container به صورت یکجا با تمام کنترلهای داخل آن فعال گردیدهاست.
بنابراین برای اعمال declarative initialization، یک ناحیه را توسط kendo.init مشخص کرده و سپس توسط data-roleها، نام ویجت وب مورد نظر را به صورت lower case مشخص میکنیم. همچنین فایلهای اسکریپت مورد استفاده نیز نباید تداخلی داشته باشند.
تنظیمات ویجتهای وب Kendo UI
تاکنون نمونهی سادهای از بکارگیری ویجتهای وب Kendo UI را بررسی کردیم؛ اما این ویجتها توسط تنظیمات پیش بینی شده برای آنها بسیار قابل تنظیم و تغییر هستند. تنظیمات آنها نیز بستگی به روش استفاده و آغاز آنها دارد. برای مثال اگر این ویجتها را توسط کدهای جاوا اسکریپتی آغاز کردهاید، در همانجا توسط پارامترهای افزونهی جیکوئری میتوان تنظیمات مرتبط را اعمال کرد:
<script type="text/javascript"> $(function () { $("#pickDate").kendoDatePicker({ format: "yyyy/MM/dd" }); }); </script>
در حالت declarative initialization، پارامتر format تبدیل به ویژگی data-format خواهد شد:
<input id="dateOfBirth" type="text" data-role="datepicker" data-format="yyyy/MM/dd" />
تنظیمات DataSource ویجتهای وب
بسیاری از ویجتهای وب Kendo UI با دادهها سر و کار دارند مانند Grid، Auto Complete، Combo box و غیره. این کنترلها دادههای خود را از طریق خاصیت DataSource دریافت میکنند. برای نمونه در اینجا یک combo box را در نظر بگیرید. در مثال اول، خاصیت dataSource کنترل ComboBox در همان افزونهی جیکوئری تنظیم شدهاست:
<input id="colorPicker1" /> <script type="text/javascript"> $(document).ready(function () { $("#colorPicker1").kendoComboBox({ dataSource: ["Blue", "Green", "Red", "Yellow"] }); }); </script>
<input id="colorPicker2" data-role="combobox" data-source='["Blue", "Green", "Red", "Yellow"]' /> <script type="text/javascript"> $(document).ready(function () { kendo.init($("#colorPicker2")); }); </script>
کار با رویدادهای ویجتهای وب
نحوهی کار با رویدادهای ویجتهای وب نیز بر اساس نحوهی آغاز آنها متفاوت است. در مثالهای ذیل، دو حالت متفاوت تنظیم رویداد change را توسط خواص افزونهی جیکوئری:
<input id="colorPicker3" /> <script type="text/javascript"> function onColorChange(e) { alert('Color Change!'); } $(document).ready(function () { $("#colorPicker3").kendoComboBox({ dataSource: ["Blue", "Green", "Red", "Yellow"], change: onColorChange }); }); </script>
<input id="colorPicker4" data-role="combobox" data-source='["Blue", "Green", "Red", "Yellow"]' data-change="onColorChange" /> <script type="text/javascript"> function onColorChange(e) { alert('Color Change!'); } $(document).ready(function () { kendo.init($("#colorPicker4")); }); </script>
تغییر قالب ویجتهای وب
Kendo UI همیشه یک جفت CSS را جهت تعیین قالبهای ویجتهای خود، مورد استفاده قرار میدهد. برای نمونه در مثالهای فوق، kendo.common.min.css حاوی اطلاعات محل قرارگیری و اندازهی ویجتها است. شیوه نامهی دوم همیشه به شکل kendo.[skin].min.css تعریف میشود که دارای اطلاعات رنگ و پس زمینهی ویجتها خواهد بود؛ مانند kendo.black.min.css، kendo.blueopal.min.css و امثال آن که در پوشهی styles قابل مشاهده هستند.
همچنین باید دقت داشت که همیشه common باید پیش از skin ذکر شود؛ زیرا در تعدادی از حالات، شیوه نامهی skin، اطلاعات common را بازنویسی میکند.
علاوه بر skinهای پیش فرض موجود در پوشهی styles، امکان استفاده از یک theme builder آنلاین نیز وجود دارد: kendo-ui-themebuilder
کتابخانه css3-slick-modal-popups
- 15 transitions effects
- 5 transition speeds
- 9 popup positions
- 50+ basic options
- Advanced options
- Custom modal size
- Set a cookie for visitors
- Set a timed visibility delay
- Easy to use and modify
- Lightweight and flexible
- HTML5 and CSS3 powered
- jQuery powered
Here are some of the reasons why nullable reference types are less than ideal:
- Invoking a member on a null value will issue a System.NullReferenceException exception, and every invocation that results in a System.NullReferenceException in production code is a bug. Unfortunately, however, with nullable reference types we “fall in” to doing the wrong thing rather than the right thing. The “fall in” action is to invoke a reference type without checking for null.
- There’s an inconsistency between reference types and value types (following the introduction of Nullable<T>) in that value types are nullable when decorated with “?” (for example, int? number); otherwise, they default to non-nullable. In contrast, reference types are nullable by default. This is “normal” to those of us who have been programming in C# for a long time, but if we could do it all over, we’d want the default for reference types to be non-nullable and the addition of a “?” to be an explicit way to allow nulls.
- It’s not possible to run static flow analysis to check all paths regarding whether a value will be null before dereferencing it, or not. Consider, for example, if there were unmanaged code invocations, multi-threading, or null assignment/replacement based on runtime conditions. (Not to mention whether analysis would include checking of all library APIs that are invoked.)
- There’s no reasonable syntax to indicate that a reference type value of null is invalid for a particular declaration.
- There’s no way to decorate parameters to not allow null.