پست ها توسط فرشته حقیقی

برای اینکار به دو تابع نیاز داریم.یکی برای  گرفتن محتویات دکمه ای که کاربر کلیک می کند و  دیگری برای نمایش آن در اسکرین ماشین حساب خود.

کامپوننت اصلی بصورت زیر می شود:

import React, { Component } from 'react';
import './App.css';
import ResultComponent from './components/ResultComponent';
import KeyPadComponent from "./components/KeyPadComponent";

class App extends Component {
    constructor(){
        super();

        this.state = {
            result: ""
        }
    }

    onClick = button => {

        if(button === "="){
            this.calculate()
        }

        else if(button === "C"){
            this.reset()
        }
        else if(button === "CE"){
            this.backspace()
        }

        else {
            this.setState({
                result: this.state.result + button
            })
        }
    };


    calculate = () => {
        var checkResult = ''
        if(this.state.result.includes('--')){
            checkResult = this.state.result.replace('--','+')
        }

        else {
            checkResult = this.state.result
        }

        try {
            this.setState({
                // eslint-disable-next-line
                result: (eval(checkResult) || "" ) + ""
            })
        } catch (e) {
            this.setState({
                result: "error"
            })

        }
    };

    reset = () => {
        this.setState({
            result: ""
        })
    };

    backspace = () => {
        this.setState({
            result: this.state.result.slice(0, -1)
        })
    };

    render() {
        return (
            <div>
                <div className="calculator-body">
                    <h1>Simple Calculator</h1>
                    <ResultComponent result={this.state.result}/>
                    <KeyPadComponent onClick={this.onClick}/>
                </div>
            </div>
        );
    }
}

export default App;

سپس تابع گرفتن ورودی از کاربر زمانیکه کاربر دکمه ای را کلیک می کند بصورت زیر انجام می شود:

import React, {Component} from 'react';

class KeyPadComponent extends Component {

    render() {
        return (
            <div className="button">
                <button name="(" onClick={e => this.props.onClick(e.target.name)}>(</button>
                <button name="CE" onClick={e => this.props.onClick(e.target.name)}>CE</button>
                <button name=")" onClick={e => this.props.onClick(e.target.name)}>)</button>
                <button name="C" onClick={e => this.props.onClick(e.target.name)}>C</button><br/>


                <button name="1" onClick={e => this.props.onClick(e.target.name)}>1</button>
                <button name="2" onClick={e => this.props.onClick(e.target.name)}>2</button>
                <button name="3" onClick={e => this.props.onClick(e.target.name)}>3</button>
                <button name="+" onClick={e => this.props.onClick(e.target.name)}>+</button><br/>


                <button name="4" onClick={e => this.props.onClick(e.target.name)}>4</button>
                <button name="5" onClick={e => this.props.onClick(e.target.name)}>5</button>
                <button name="6" onClick={e => this.props.onClick(e.target.name)}>6</button>
                <button name="-" onClick={e => this.props.onClick(e.target.name)}>-</button><br/>

                <button name="7" onClick={e => this.props.onClick(e.target.name)}>7</button>
                <button name="8" onClick={e => this.props.onClick(e.target.name)}>8</button>
                <button name="9" onClick={e => this.props.onClick(e.target.name)}>9</button>
                <button name="*" onClick={e => this.props.onClick(e.target.name)}>x</button><br/>


                <button name="." onClick={e => this.props.onClick(e.target.name)}>.</button>
                <button name="0" onClick={e => this.props.onClick(e.target.name)}>0</button>
                <button name="=" onClick={e => this.props.onClick(e.target.name)}>=</button>
                <button name="/" onClick={e => this.props.onClick(e.target.name)}>รท</button><br/>
            </div>
        );
    }
}


export default KeyPadComponent;

تابع نمایش نیز بصورت زیر می شود:

import React, {Component} from 'react';

class ResultComponent extends Component {


    render() {
        let {result} = this.props;
        return (
            <div className="result">
                <p>{result}</p>
            </div>
    )
        ;
    }
}


export default ResultComponent;

app.css  نیز بصورت زیر می توانیم تنظیم کنیم:

.result {
  height: 60px;
  background-color: #bbb;
  width: 100%;
}

.result p {
  font-size: 40px;
  margin: 5px;

}

.calculator-body {
  max-width: 400px;
  margin: auto;
}

.button {
  display: block;
  background-color: #bbb;
}

button {
  width: 25%;
  height: 60px;
  font-size: 30px;
}

اینکار با استفاده از formik بصورت زیر انجام می شود:

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

class App extends React.Component {
    render() {
        return (
            <Formik
                initialValues={{
                    acceptTerms: false
                }}
                validationSchema={Yup.object().shape({
                    acceptTerms: Yup.bool().oneOf([true], 'قوانین سایت می بایست پذیرفته گردد')
                })}
                onSubmit={fields => {
                    alert('SUCCESS!! :-)\n\n' + JSON.stringify(fields, null, 4))
                }}
            >
                {({ errors, status, touched }) => (
                    <Form>
                        <div className="form-group form-check">
                            <Field type="checkbox" name="acceptTerms" className={'form-check-input ' + (errors.acceptTerms && touched.acceptTerms ? ' is-invalid' : '')} />
                            <label htmlFor="acceptTerms" className="form-check-label">قوانین سایت را می پذیرم</label>
                            <ErrorMessage name="acceptTerms" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-group">
                            <button type="submit" className="btn btn-primary mr-2">خرید</button>
                           
                        </div>
                    </Form>
                )}
            </Formik>
        )
    }
}

export { App }; 

در اینجا، متغیر acceptTerms را چک می کنیم.اگر false باشد، به کاربر پیغام می دهد که چک باکس باید تیک بخورد. اینکار با استفاده از کد ( 'قوانین سایت می بایست پذیرفته گردد',[true])acceptTerms: Yup.bool().oneOf انجام می شود.

این متغیر در ابتدا با false مقدار دهی می شود، چون میخواهیم هنگامی که کاربر تیک قبول قوانین را زد، true شود.

برای اینکار بصورت زیر عمل می کنیم:

export function configureFakeBackend() {
    let users = [{ id: 1, username: 'test', password: 'test', firstName: 'Test', lastName: 'User' }];
    let realFetch = window.fetch;
    window.fetch = function (url, opts) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {

                // درخواست post
                if (url.endsWith('/users') && opts.method === 'POST') {
                    let params = JSON.parse(opts.body);

                    let filteredUsers = users.filter(user => {
                        return user.username === params.username && user.password === params.password;
                    });

                    if (filteredUsers.length) {
                        // در صورتیکه یوزر و پسورد به درستی وارد شده باشد اطلاعات یوزر برگردانده شود
                        let user = filteredUsers[0];
                        let responseJson = {
                            id: user.id,
                            username: user.username,
                            firstName: user.firstName,
                            lastName: user.lastName
                        };
                        resolve({ ok: true, text: () => Promise.resolve(JSON.stringify(responseJson)) });
                    } else {
                        reject('Username or password is incorrect');
                    }

                    return;
                }

                // درخواست Get
                if (url.endsWith('/users') && opts.method === 'GET') {
                   
                    if (opts.headers && opts.headers.Authorization === `Basic ${window.btoa('test:test')}`) {
                        resolve({ ok: true, text: () => Promise.resolve(JSON.stringify(users)) });
                    } else {
                        resolve({ status: 401, text: () => Promise.resolve() });
                    }

                    return;
                }

                // pass through any requests not handled above
                realFetch(url, opts).then(response => resolve(response));

            }, 500);
        });
    }
}

برای اینکار بصورت زیر عمل می کنیم:

useEffect(() => {
    axios.get('https://test.com')
        .then(response => setTotalReactPackages(response.data.total));

}, []);

و یا با استفاده از async و await :در این روش به جای then  در روش قبل متد await را فراخوانی می کنیم.

async componentDidMount() {
    const response = await axios.get('https://test..com');
    this.setState({ totalReactPackages: response.data.total })
}

درصورتیکه بخواهیم درخواست header داشته باشد بصورت زیر پارامترهای هدر را مشخص می کنیم:

componentDidMount() {
    const headers = {
        'Authorization': 'Bearer my-token',
        'My-Custom-Header': 'foobar'
    };
    axios.get('https://test.com', { headers })
        .then(response => this.setState({ totalReactPackages: response.data.total }));
}

برای ارسال درخواست از تابع fetch  استفاده می کنیم.در این تابع باید آدرس مقصد را تعیین کنیم.

useEffect(() => {
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React Hooks POST Request Example' })
    };
    fetch('https://test.com/posts', requestOptions)
        .then(response => response.json())
        .then(data => setPostId(data.id));

}, []);

id مربوط به response را در postId قرار می دهیم و در  متد render می توانیم آن را نمایش دهیم.
[] به این معناست که درخواست فقط یکبار اجرا می شود و درصورتیکه به خطا خورد مجددا اجرا نمی شود.

همچنین می توانیم از توابع async و await استفاده کنیم

async componentDidMount() {
    // POST request using fetch with async/await
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React POST Request Example' })
    };
    const response = await fetch('https://test.com/posts', requestOptions);
    const data = await response.json();
    this.setState({ postId: data.id });
}

در آخر می توانیم  بررسی کنیم که  آیا در خواست با موفقیت انجام شد یا خیر:

componentDidMount() {
    // POST request using fetch with error handling
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React POST Request Example' })
    };
    fetch('https://test.com/invalid-url', requestOptions)
        .then(async response => {
            const data = await response.json();

            if (!response.ok) {
                const error = (data && data.message) || response.status;
                return Promise.reject(error);
            }

            this.setState({ postId: data.id })
        })
        .catch(error => {
            this.setState({ errorMessage: error.toString() });
            console.error('There was an error!', error);
        });
}

برای اینکار می توانیم از تابع map استفاده کنیم. ابتدا باید ردیفهای جدول را با استفاده از تابع useState در یک متغیر (در اینجا users ) ذخیره کنیم.

import React, { useState } from 'react';

function App() {
    const [users, setUsers] = useState([
        { id: 1,  name: 'احمدی', email: 'ahmadi@omh.net', role: 'کارمند' },
        { id: 2, name: 'سعیدی', email: 'saeed@mmj.org', role: 'دانشجو' },
        { id: 3, name: 'حقیقی', email: 'hagh@hgf.com', role: 'کارمند' }
        
    ]);

    return (
        <div className="container">
            <h3 className="p-3 text-center">نمایش یک لیست در react </h3>
            <table className="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>نام</th>
                        <th>ایمیل</th>
                        <th>شغل</th>
                    </tr>
                </thead>
                <tbody>
                    {users && users.map(user =>
                        <tr key={user.id}>
                            <td>{user.name} </td>
                            <td>{user.email}</td>
                            <td>{user.role}</td>
                        </tr>
                    )}
                </tbody>
            </table>
        </div>
    );
}

export { App };

برای اینکار 3 روش وجود دارد:

1. در صفحه jsf

<h:form>  
  <h3>Using JSF  navigation</h3>   
 <h:commandButton action="home" value="home" />  
</h:form>  
 

در اینجا  زمانیکه دکمه home کلیک شود به صفحه home.xhtml فوروارد می شود..

2.  با استفاده از Managed Bean :

ManagedBean(name = "navigationController", eager = true)
 @RequestScoped 
public class NavigationController implements Serializable {  
  public String moveToHome()
{       return "home";     }
 } 

و در قسمت UI قرار می دهیم:

<h:form>  
  <h3>Using Managed Bean</h3> 
   <h:commandButton action="#{navigationController.moveToHome}"    value="home" />  
      </h:form> 

3. با استفاده از فایل faces-config.xml

<navigation-rule> 
   <from-view-id>home.xhtml</from-view-id>  
  <navigation-case> 

 
      <from-action>#{navigationController.goToPage1}</from-action>   
    <from-outcome>page</from-outcome>     
  <to-view-id>page1.jsf</to-view-id> 
  </navigation-case>    
</navigation-rule>  

و در managed bean متد زیر را قرار می دهیم:

public String goToPage1(){
    return "page"; 
 }

4. با استفاده از قرار دادن id برای  page ها

<h:form>    
   <h:commandLink action="#{navigationController.showPage}" value="page1">   
    <f:param name="pageId" value="1" />  
  </h:commandLink>     
</h:form>

و در bean متد زیر را قرار می دهیم

ManagedBean(name = "navigationController", eager = true) 
@RequestScoped
 public class NavigationController implements Serializable 
{        //this managed property will read value from request parameter pageId  
  @ManagedProperty(value="#{param.pageId}") 
   private String pageId; 
 
 
   public String showPage()
{     
  if(pageId == null){       
   return "home";      
 }    
   if(pageId.equals("1")){  
        return "page1";    
   }
    }
 } 

ﻣﯽ ﺗﻮاﻧﯿﻢ ازﮐﻮﮐﯽ ﻫﺎ ﺑﺮاي ذﺧﯿﺮه ﯾﮑﺴﺮي اﻃﻼﻋﺎت ﺧﺎص ﮐﺎرﺑﺮان ﺻﻔﺤﺎت اﺳﺘﻔﺎده ﮐﻨﯿﻢ و در ﺻﻮرت ﻧﯿﺎز آن ﻫﺎ را در ﺻﻔﺤﺎت دﯾﮕﺮ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار دﻫﯿﻢ.برای حذف یک کوکی کافیست مدت زمانیکه میخواiهیم کوکی فعال باشد را مشخص کنیم.مثلا می گوییم کوکی بعد از 5 دقیقه پاک شود.

function delete_cookie ( cookie_name ) {  
 	    var dat=new Date();
            dat.setTime(dat.getTime()+(5*1000));
            var expires="; expires= " +dat.toGMTString();
            document.cookie=cookie_name ;
            document.cookie=document.cookie+  expires;
}  

کد های جاوااسکریپت باید بین تگ <script>و</script> قرار گیرند.سپس این اسکریپت را میتوانیم در تگ <body> یا <head> قرار دهیم.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "welcome";
}
</script>
</head>
<body>

<h1>A Web Page</h1>
<p id="demo">hello</p>
<button type="button" onclick="myFunction()">Try it</button>

</body> 
</html>

همچنین می توانیم اسکریپت را در یک فایل قرار دهیم. در فایل myscript.js قرار می دهیم:

function myFunction() {
  document.getElementById("demo").innerHTML = "welcome";
}

سپس در صفحه html خود این فایل را در تگ اسکریپت فراخوانی می کنیم.

<script src="myScript.js"></script>

و صفحه html بصورت زیر می شود:

<html>
<body>

<h2>External JavaScript</h2>

<p id="demo">hello.</p>

<button type="button" onclick="myFunction()">Try it</button>

<script src="myScript.js"></script>

</body>
</html>

فرض کنیم می خواهیم هنگامی که کاربر دکمه تایید را زد بررسی شود که آیا مایل به ارسال اطلاعات خود می باشد یا خیر.

<td width="38%" align="right" nowrap="nowrap">
<html:text property="name" styleId="name"  />
</td>
<td width="12%" align="right" nowrap="nowrap">
<bean:message key="name"/>
</td>

در تگ button تابع جاوااسکریپت خود را فراخوانی می کنیم:

<html:submit style="width:90px" 
onclick="javascript:if (!sendconfirm() ) return false);">                                             
<bean:message key="submit"/>
</html:submit>

تابع sendconfirm  بصورت زیر می شود:

 function sendconfirm(){
        var showconfirm=confirm("آیا مایل به ارسال اطلاعات  خود هستید؟")  ;
        if(showconfirm==true)  {
            return true;
        }
    }

فرض کنیم که یک المان  بصورت زیر داریم:

<input type='checkbox' name='selectedList'>

تابع جاوا اسکریپت بصورت زیر می شود

 function listSelectedItem(param, elementId) {
            var element= document.getElementsByName("selectedList");
            var paramStr="";
            len = element.length;

            if (len != 0) {
                for (i = 0; i < len; i++) {
                    if (element[i].checked)

                    {
                        paramStr = paramStr + element[i].id + ','
                    }
                }

                param.value = paramStr ;


            }
        }

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

فرض کنیم یک المان  بصورت زیر داریم:

<input type='checkbox' name='selectedList'>

تابع جاوا اسکریپت را بصورت زیر می نویسیم:

  function validateForm(param){
            var element= document.getElementsByName("selectedList");
            len=element.length;
            if(len!=0)  {
                for(i=0;i<len;i++){
                    if(element[i].checked)  {
                        return true;
                    }

                }
                alert("حداقل یک آیتم باید انتخاب شود");
                return false;
            }

        }

فرض کنیم یک لیست شامل آبجکتهایی از نوع کلاس person داریم(resultList) و میخواهیم آنها را براساس فیلد سن مرتب کنیم.

public class person{
String name;
int age;
//getter & setter
}

برای مرتب سازی از Collections.sort و اینترفیس Comparator استفاده می کنیم:

  public class PersonnComparator implements Comparator<Person> {
        @Override
        public int compare(Person  o1, Person o2) {
            return o1.getAge().compareTo(o2.getAge());
        }
    }

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

Collections.sort(resultList,  new PersonComparator());

برای تبدیل timestamp به فرمت دلخواه کافی است فرمت مورد نظر را به  متد SimpleDateFormat   بدهیم.

Timestamp time= (Timestamp) new Timestamp(System.currentTimeMillis());
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS+0430");

برای بدست آوردن اطلاعات جغرافایی  بصورت زیر در  صفحه jsp عمل می کنیم:

<%
   Locale locale = request.getLocale();
   String language = locale.getLanguage();
   String country = locale.getCountry();
%>

HttpServletRequest  تعدادی متد برای  برقراری security  در صفحات jsp  فراهم کرده است:

1. isUserInRole() :  این متد نقش کاربر را بررسی می کند.
2. getProtocol() : پروتکل ریکوِئست ارسال شده را بررسی می کند.
3. isSecure() : بررسی می کند که ریکوئست ارسال شده از https  استفاده می  کند یا خیر.
4. getUserPrinciple()  : نام یوزر را برمی گرداند.

برای lمثال از متد isUserInRole بصورت زیر استفاده می کنیم

<% if (request.isUserInRole("manager")) { %>
   <a href = "managers/mgrreport.jsp">Manager Report</a>
   <a href = "managers/personnel.jsp">Personnel Records</a>
<% } %>

یکی از روشهای کنترل فیلدها در struts2 با استفاده از فایل xml می باشد.
1. کنترل اعداد int و double:

 <validators>  
          <field name="age">  
              <field-validator type="int">  
                  <param name="min">20</param>  
                  <param name="max">40</param>  
                  <message>Age must be between ${min} and ${max}</message>  
              </field-validator>  
          </field>  
  
</validators>  
<validators>  
          <field name="price">  
              <field-validator type="double">  
                 <param name="min">100.0</param>  
                 <param name="max">10000.0</param>  
                 <message>Price must be between ${min} and ${max}</message>  
          </field-validator>  
          </field>  
  
</validators>  

2. کنترل تاریخ:

<validators>  
      <field name="day">  
        <field-validator type="date">  
            <param name="min">1390/01/01</param>  
              <param name="max">1399/01/01</param>  
              <message>Date of Birth must be within ${min} and ${max}</message>  
        </field>  
      </field>  
  
</validators>  

3. کنترل ایمیل:

<validators>  
    <field name="email">  
          <field-validator type="email">  
          <message>Invalid email address</message>          
       </field-validator>  
    </field>  
  
</validators>  

4. کنترل url:

<validators>  
  <field-validator type="url">  
         <field name="websiteUrl">  
             <message>Invalid website url</message>  
         </field>  
</field-validator>  
  
</validators>  

5. کنترل رشته:

<validators>  
    <field name="password">  
          <field-validator type="stringlength">  
          <param name="minLength">6</param>  
          <param name="maxLength">10</param>  
          <param name="trim">true</param>  
          <message>Password must be between 6 to 10 characters long</message>         
       </field-validator>  
    </field>  
  

</validators>  

6. کنترل عبارتهایی مانند پسورد:

<validators>  
         <field name="password">  
        <field-validator type="regex">  
         <param name="expression">[A,a][A-Z,a-z,0-9]{5}</param>  
        <message>password must be alpha numeric of 6 digits and starts with a or A</message>  
        </field-validator>  
    </field>  
  
</validators>  

در اینجا می گوییم که پسورد باید 6 رقم شامل حرف و عدد و با a یا A شروع شود.

7. کنترل فیلدهای اجباری:

<validators>  
    <field name="nationalCode">  
          <field-validator type="requiredstring">  
            <param name="trim">true</param>  
            <message>nationalCodeis required</message>  
       </field-validator>  
    </field>  
  
</validators>