مدرس دوره علی شیخ
مدت دوره 36:41:55
تعداد ویدیو 170

وضعیت دوره : کامل شده
قیمت دوره : 799,000 679,000 تومان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • سلام استاد، خسته نباشید.
    پیغامی که کاربر از طریق فرم تماس ارسال میکنه کجا میره و کجا قراره دریافت بشه؟ آیا توی پنل ادمین باید یه بخش رو برای پیام های کاربران قرار بدیم که ادمین از اونجا پیام ها رو مشاهده کنه و پاسخ رو به ایمیل کاربر ارسال کنه؟
    چون فقط توی پروژه وبسایت این فرم رو دیدم و توی پنل ادمین ازش خبری نبود واسم سوال شد که اون پیغام ارسال شده قراره کجا بره. احتمالا فراموش کردین در پنل ادمین نمایش بدین که مهم نیست. فقط چون من الان یه پروژه گیرم اومده و باید این بخش رو در صفحه ی تماس با ما پیاده سازی کنم خواستم ببینم کاربردش چیه و آیا همونطور که خودم حدس باید یه بخش واسش داخل پنل ادمین قرار بدم؟
    ممنون که همیشه پاسخ میدین.

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

  • سلام آقای شیخ.
    من به جای استفاده از useFormStatus که باهاش آشنایی ندارم برای ارسال فرم تماس با ما از formik و yup استفاده کردم اما خطای زیر رو دریافت می کنم :

    Access to fetch at 'http://localhost:8000/api/contact-us' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
    
    fetch.js:20
    POST http://localhost:8000/api/contact-us net::ERR_FAILED
    ContactForm.js:20 TypeError: Failed to fetch
    at postData (fetch.js:20:28)
    at handleSubmit (ContactForm.js:17:39)
    at onSubmit (ContactForm.js:34:31)

    فانکشن پست کننده در فایل fetch.js بصورت زیر ایجاد شده :
    export const postData = async(url, body) => {
    
    const response = await fetch(`http://localhost:8000/api${url}`, {
    cache: "no-store",
    method: "POST",
    body: JSON.stringify(body),
    headers: {
    "Content-Type": "application/json",
    "Accept": "application/json"
    }
    });

    if (response.ok) {
    const data = await response.json();
    console.log(data);
    } else {
    throw new Error(`مشکلی پیش آمده ${response.status}`);
    }
    }

    و کد های کامپوننت ContactForm هم به این صورت هستند :
    "use client";
    

    import { postData } from "@/utils/fetch";
    import { ErrorMessage, Field, Form, Formik } from "formik";
    import * as Yup from "yup";

    export default function ContactForm() {
    const contactSchema = Yup.object().shape({
    name: Yup.string().max(20, "بیش از 20 کاراکتر مجاز نیست").required("نام الزامی است"),
    email: Yup.string().email("ایمیل نامعتبر است").required("ایمیل الزامی است"),
    subject: Yup.string().max(40, "بیش از 40 کاراکتر مجاز نیست").required("موضوع الزامی است"),
    text: Yup.string().required("متن الزامی است")
    });

    const handleSubmit = async (values) => {
    try {
    const request = await postData("/contact-us", values);
    alert("با موفقیت پست شد", request);
    } catch (err) {
    console.error(err);
    }
    }

    return (
    <div class="form_container">
    <Formik
    initialValues={{
    name: "",
    email: "",
    subject: "",
    text: ""
    }}
    validationSchema={contactSchema}
    onSubmit={(values) => handleSubmit(values)}
    >
    <Form>
    <div>
    <Field name="name" type="text" class="form-control" placeholder="نام و نام خانوادگی" />
    <ErrorMessage name="name" render={(message) => <small className="err-message">{message}</small>} />
    </div>
    <div>
    <Field name="email" type="email" class="form-control" placeholder="ایمیل" />
    <ErrorMessage name="email" render={(message) => <small className="err-message">{message}</small>} />
    </div>
    <div>
    <Field name="subject" type="text" class="form-control" placeholder="موضوع پیام" />
    <ErrorMessage name="subject" render={(message) => <small className="err-message">{message}</small> } />
    </div>
    <div>
    <Field name="text" as="textarea" rows="10" style={{height:"100px"}} class="form-control"
    placeholder="متن پیام"></Field>
    <ErrorMessage name="text" render={(message) => <small className="err-message">{message}</small> } />
    </div>
    <div class="btn_box">
    <button type="submit">ارسال</button>
    </div>
    </Form>
    </Formik>
    </div>
    );
    }

    آیا راهکاری برای این مشکل دارید؟

    • سلام وقت بخیر.
      توی option های fetch مقدار

      mode: 'no-cors',

      را اضافه و تست کنید.

      همچنین لطف کنید توی نوشتن متن کامنت، کدها و یا متن های ارور را بین سه عدد بک تیک قرار داده و کامنت را ارسال کنید.


  • سلام . وقت بخیر
    در بخش فرم، می‌خواهم بگم که پس از ارسال فرم، مقادیر فرم باید پاک شوند. شما اشاره ای برای پاک کردن فرم نکردید. من یک id برای فرم تعیین کردم و از کد
    document.getElementById("myForm").reset();
    استفاده کردم. کامپوننت client هست و میخوام مطمئن بشم که در هوک useEffect کار درستی انجام دادم که از getElementById استفاده کردم؟
    وقتی که فرم رو پر میکنم و دکمه ارسال رو میزنم اطلاعات فرم با موفقیت در سرور ذخیره میشه و فرم reset میشه و در قسمت log هم هیچ اروری نمیبینم.

    export default function ContactForm() {
    
    const [state, formAction] = useFormState(addPost, {});
    useEffect(() => {
    if (state?.status === "error") {
    toast.error(state.message);
    } else {
    toast.success(state.message);
    document.getElementById("myForm").reset();
    }
    }, [state]);


    تشکر

    • سلام وقت بخیر.
      بجای id میتونید از useRef ری اکت هم استفاده کنید. تمرکز دوره روی خوده نکست هست و ری اکت پیشنیاز این دوره که نیازه باهاش به خوبی آشنا باشید.