Up next in 10
Designing the _contact FrontEnd Page _ NextJs Tutorial for Beginners #26
2K views
Feb 13, 2024
In the twenty-sixth tutorial video, "Designing the _contact Frontend Page," beginners are guided through the process of designing and implementing the frontend interface for a contact page within a Next.js application. This tutorial focuses on creating a user-friendly and visually appealing form for users to input their contact information. Viewers learn how to use Next.js components and styling techniques to structure the contact page layout, including input fields for name, email, message, and a submit button. Additionally, the tutorial may cover validation methods and error handling to ensure data integrity and user feedback. By following along with this tutorial, beginners gain practical experience in frontend development with Next.js, enhancing their ability to create interactive and functional web interfaces for their applications.
View Video Transcript
0:00
हमने contact की API तो बना ली यानि कि हमारे पास अब एक endpoint ह�
0:03
जो कि data को accept करके database, हमारा so called database जो कि file system है अभी, उसके अंदर पठक देता ह�
0:10
आज हम लोग देखेंगे कि हम एक front-end form कैसे बना सकते है�
0:14
जो कि user के input को लेकर ये काम करेगा यानि कि इस API को यूज़ करना front-end पर facilitate करेग�
0:21
चलते हैं कुम्प्यूटर स्क्रीन पे और देखते हैं कि किस तरह से हम लोग इस API का इस्तेमाल करके front-end के form को user से बिल करवा सकते है�
0:38
Contact API हम लोगों ने बनाई थी पिछले वीडियो में जल्दी से मैं एक काम करूँगा funding order पे आउंगा और मैं यहाँ प�
0:44
yaan dev लिखूँगा ठीक है मेरे कीबोड में धूल चम्ग गई है बहुत ज़्याद�
0:50
लेकिन कोई बात नहीं एड़्जस्ट कर लेंगे अब मैं अगर आप लोगों यहाँ पर लेकिन आप लोग में लेके जाओं तो हमारे ब्लॉग अब इस तरह से देख रहा है मुझे अभी एक चीज़ करनी ह�
0:57
यहाँ पर contact form बनाना है contact API हमारी तैयार है ठीक है त�
1:01
contact form बनाने के लिए सबसे पहले कुछ basic styles मैं डालना चाहूँगा देखो आ�
1:05
पूरा development का process समझो module.css एक मैंने यहाँ पर contact form के लिए styles बना लिए अब मैं यहाँ पर लिखूँगा एक h1 और h1 के अंदर मैं डालूग�
1:18
contact us इंशौर करना कि आप लोग का यहाँ पर JavaScript react
1:24
selected हो ठीक है और उसी के साथ साथ यहाँ पर अगर आप लोग क�
1:28
JavaScript react selected होगा तो आपको emit मिलेगा या नि कि इस तरह क�
1:32
जो मुझे suggestions देखने को मिल रहे हैं वो आपको भी देखने को मिलेंगे ठीक है मैं यहाँ पर क्या करूँगा एक contact us लिखने के बाद एक div डालूगा और यह ज�
1:40
HTML का structure न वो मैं कहां से लेकर आउंगा आप देखते जाओ और आपलोग भी कहोग�
1:46
यह कैसी website पर जा रही हो बूटस्ट्राप तो हम use ही नहीं कर रहे हैं तो बूटस्ट्राप पर जान क्यों रहे हो और आपलोगो पता चलेगा क्यों जा रहा हूँ मैं बूटस्ट्राप प�
1:52
मैं यहाँ पर examples नहीं मैं docs में जाओंगा और यहाँ पर components के अंद�
1:56
पर यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ �
2:26
पर यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ �
2:56
पर यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ पर जाओंगा और यहाँ �
3:26
किसी को भी अगर मैं कोंटक्ट करूंगा तो वो क्या चीज़े हैं जो कि मैं उससे मागूंगा ठीक है अगर मैं उसकी बात करूंगा तो मैं अपनी API में आओंगा और जो मैंने postcontact.js बनाया है वो मैं आपर से देखूंगा ठीक है तो जो भी JSON इसको मिल रही है वो त�
3:56
name की बनानी है मुझे phone की बनानी है यहाँ पर name ठीक है और enter your name
4:03
name phone description email ठीक है जरहा word wrap on कर लेता हूँ ताकि कोई भी दिक्कत न हो ठीक है word wrap on करना हमेशा अच्छा रहता ह�
4:12
क्योंकि यहाँ पर आप लोग को सारा text देखेगा जो कि मैं लिख रहा हूँ अब यहाँ पर आप लोग देखना कि मैंने यहाँ पर for is equal to name किया इसकी ID को मैं name कर दूँगा ठीक है और यहाँ पर यह वाला text रठाऊंगा will not share your email यह name है ठीक है और यहाँ पर इसमें मैं एक �
4:42
email करूँगा type is equal to email ID is equal to email name is equal to email ठीक है और यहाँ पर we will never share your email with anyone else यह भी ठीक है इसके बाद for is equal to यहाँ पर आजाएगा phone ठीक है type is equal to phone आजाएगा ठीक है और उसके सासे ID phone आजाएगा यह ID match करनी चाहिए इस for से ठीक है यह for और यह ID match करने चाहिए और इसके बाद मैं क्य�
5:12
तेक्स्ट एरिया मुझे चाहिए तो मैं आसे यह इन्पूट थो हटाऊँगा इसको हटाके टेक्स्ट एरिया लियाओंगा और वो भी मैं बूट स्ट्राप से लाऊँगा आप देखो टेक्स्ट एरिया आगया यहाँ पर देखो कही न कही तो आएगा टेक्स्ट एरिय�
5:42
नहीं क्या चाहिए मुझे यह वाला ले लेता हूँ यार मैं कौन सा बूट स्ट्राप यूज़ कर रहा हूँ टेक्के तो यहाँ पर यह जो चेक मी आउट लिखा हुआ इसको मैं हटाके यहाँ पर यह डाल दोगा टेक्के class is equal to MB3 टेक्के MB3 वैसे मैंने यूज़ करी न�
6:12
आपको वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे �
6:42
नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा �
7:12
जो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नही�
7:42
पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था तो वैसे नहीं पढ़ा था त�
8:12
इसका मार्जिन मॉर्टम मैं 21 कर दिया अब मैं क्या करूँगा की ये स्पेस थोड़ी सी दूँगा यापर इमेल एड्रेस के बा�
8:20
ठीक है इमेल एड्रेस कहा लिखा है ये जो label है मेरा जो class is equal to form control है उसको मैं ज़रा यासे form label sorry
8:26
form label जो class है मेरी right click change all occurrences इसको मैं लिखोंगा styles.formlabel और यापर .formlabel को implement कर दूँग�
8:36
इसे कहा रहे था न concerns separated रहते हैं यानि की margin 0 pixels top bottom में 34 pixels left right में जो की बहुत ज़ादा हो गया मुझे पढ़ा ह�
8:49
और apply भी नहीं हुआ क्यों नहीं हुआ apply इसको क्योंकि मैंने save नहीं किया अब apply हो जाएगा मुझे बता था थोड़ा ज़ादा हो गया ठीक है तो इसको मैं यहाँ पर थोड़ा कम कर देता हूँ ठीक है अब देखो यार मैं इसकी styling अभी ज़ादा कुछ खास नहीं कर र�
9:19
थोड़ा कम कर देखा था थोड़ा गई नहीं कर देखा था थोड़ा गई नहीं कर देखा था थोड़ा गई नहीं कर देखा था थोड़ा गई नहीं कर देखा था थोड़ा गई नहीं कर देखा था थोड़ा गई नहीं कर देखा था थोड़ा गई नहीं कर देखा था थ�
9:49
मुझे बता ये फॉर्म अच्छा नहीं दिख रहा है ठीक है लेकिन उसके बाद भी elaborate your concern और यहाँ पर आपको अपना concern लिखना है तो अगर मैं यहाँ पर लिखू�
9:56
name harry email dd at harry.com password something elaborate your concern मलो y u मैंने लिख दिया ठीक ह�
10:03
मैं submit पर लिख करूँगा तो जो मेरा form है वो submit होना चीज़ा है ठीक है लेकिन मैं करूँग�
10:09
तो कुछ होगा नहीं दिखाता हूँ आपको यह देखो entry your name मैंने type email कर दिय�
10:12
गलती से तो यहाँ पर मुझे ज़रा type is equal to text करना पड़ेगा और अब ठीक है तो मैं अगर इसके बा�
10:18
भी इसको submit करूँगा ना form को यह देखो तब भी यह देखो यह get request हो रहा है सबस�
10:23
पड़ेगा तो मुझे यहाँ पर क्या करना पड़ेगा इसको submit करने के लिए एक function लिखना पड़ेगा ठीक है तो देखो यह सारे काम कैसे किये जाएंगे आप लोग देखना मैं क्या करूँगा मैं क्या करूँगा यहाँ पर एक function बनाओंगा handle submit ठीक है जोकी एक arrow function है मै�
10:53
यह function नन हो जाएगा अब मैं यहाँ पर क्या करूँगा थी�
10:58
state variable बनाओंगा use state snippet एक तो मैं बनाओंगा name ठीक है name set name और एक मै�
11:06
बनाओंगा यहाँ पर email ठीक है एक बनाओंगा phone और एक बनाओंगा dsc ठीक है name email
11:16
phone dsc चारों बन गए ठीक है तो यह चार मैंने यहाँ पर बना लिए ठीक है अब देखना क्या होग�
11:21
यह चारों बनाने के बाद यह ज़रा सेकंट सेकंट हटा दूँ मैं ठीक है चार state variables
11:28
बना दिये मैंने अब मैं यहाँ पर क्या करूँगा जो value होगी इस input की उसको मैं लिख दूँगा value is equal to यहाँ पर लिखूंगा value is equal to और name ठीक है इसकी value name और इसकी value होगी value is equal to हो जाएगी क्या होगी value इसकी phone की email की email होगी phone की phone होगी तो जो मेरा phone है इसमें मैं value is equal
11:58
to dsc लिखूंगा ठीक है तो यह values आ जाएंगी अब इनकी जो default values है वो मै�
12:05
ब्लैंक कर दूँगा ठीक है सेव किया कोई error तो नहीं आया न आया रहा है आया क्यों नहीं आएग�
12:10
है रियाक्ट एकडम पुलिस की तरह बैठा हुआ तुम गलती करो और वो error फैकेगा ठीक है यहाँ पर देखो आ�
12:17
error मैंने ठीक कर दिया है अब यहाँ पर देखो मैं form को submit करूँगा तो कम सकम एक चीज तो नहीं हो रही है क्या नहीं हो रहा ह�
12:22
पेज रिलोड तो नहीं हो रहा है कम सकम ठीक है जो एक अच्छी ख़बर है लेकिन मैं चाहता हूँ कि जस ही मैं submit पर क्लिक करूँगी क्या हु�
12:30
आप देखे रहे हैं और यह रियाक्ट के बेसिक्स हैं बाद वे मैं बता दू आप लोगों को अब मैं यहाँ पर क्या करूँगा value is equal to जहां जहां मैंने लिखा ह�
12:44
जहां जहां मैंने value is equal to लिखा है मैं लिखूंगा on change is equal to handle change चोकी एक function होगा भी मैं बताऊंगा कैसे रन करेगा ठीक है मैं copy करूँगा और value is equal to यह किया मैंने on change is equal to handle change और यहां पर भी on change is equal to यह क्या कर दिया मैंने on change is equal to handle change करना है मुझे copy करके paste इस input को मैंने duplicate क्यों कर �
13:14
ठीक है copy paste और paste अब copy paste में भी अगर मैं गलती करूँगा तो कैसे काम चलेगा handle change is not defined I know that अभी मैं क्या करूँगा इसको replicate करूँगा और यहां पर handle change को implement करूँग�
13:31
handle change is equal to e और यहां पर मैं लिखोंगा console.log e और उसी के साथ सा change ठीक है तो देखो मैं क्या करूँगा इसको reload करता हूँ सबसे पहले तो मालू मैं कुछ लिखता हूँ यहां पर देखो एक event यहां पर आ रहा है ठीक है एक event आ रहा है यहां पर अब इस event के अंदर क्या क्या ह�
14:01
यहां मैं यहां पर event.target. यहां पर और भी बहुत सारी चीज़े हैं जैसे की event.target.name इसमें होगा event.target.name तो मैं यहां पर क्या करूँग�
14:11
if event.target.name equal to if event.target.name is equal to phone तो क्या करो�
14:21
कि set phone कर दो क्या क्या कर दो set phone e.value ठीक है set phone कर दो e.value तो अगर मैं अभी यहां प�
14:33
change करूँगा values तो कुछ नहीं हो रहा है which is a problem और ऐसा इसलिए हो रहा है कि मुझे यह सारे functions क�
14:40
अंडर डालना पड़ेगा ठीक है यहां पर मैंने state define कर रही हूँ उसके बाद ठीक है तो क्या होगा कि आब य�
14:47
जो set phone है वो use हो रहा है ठीक है तो मैं आपर कुछ लिखंगा तो यह देखो यह change हो रहा है ठीक है तो मैं अगर इसको अभी reload करू�
14:53
और मैं यहाँ पर कुछ change करूँ तो एक error तो आ रहा है यह कहा रहा है component is changing a controlled input to be uncontrolled
15:00
this is likely caused by the value changing from a defined to undefined तो यहाँ मुझे e.target.value लिखना चीज़िए था अब same चीज़ मैं आपर करने वाला हू�
15:07
बाकी के जो हमारे यहाँ पर else if लिखोंगा दुबारा से यहाँ पर else if लिखोंगा और एक और else if लिखोंगा ठीक है और यहाँ पर मै�
15:17
phone के अलावा मेरे पास एक तो email है ठीक है तो मैं set email कर दूँगा यहाँ पर और set phone कर दिया set email कर दिया और इसके बाद मैं लिखोंगा set d-e-s-c इसके बाद आ जाएगा हमारे पास set name ही भुल गया है मैं बताओ set name अब यह करने के बाद हम लोग क्या करेंगे कि इसको save करें�
15:47
जाएगा इंपर type नहीं हो रहा है which is a problem set phone किया मैंने set email किया यहाँ पर इसका नेम email हुआ तो यह कर दो इसका नेम d-e-s-c हुआ तो set d-e-s-c कर दो वन्ना set name कर दो चा मैंने save नहीं किया यह पास को मैं भी न डिलोड करूँगा और अब मैं आपर change कर पा रहा हूँ सब �
16:17
textarea मैं बताता हूँ आपको क्या करूँगा textarea की value को d-e-s-c नहीं करूँगा textarea की अंदर की content क�
16:22
मैं कुछ इस तरह से d-e-s-c करूँगा क्योंकि इसके अंदर का जो content होता है वो इसकी value होती है ठीक है तो मैं क्या करूँगा इसको इस तरह स�
16:28
d-e-s-c लिखूँगा और यहाँ पर मैं कहूँगा e.target.name अगर d-e-s-c है तो set d-e-s-c e.target
16:36
मैं आपर लिखूँगा inner text क्योंकि इसके अंदर का जो भी text होगा ठीक है तो अभी यहाँ पर मैं लिख सकता हूँ आप देख सकते हो तो अगर मैं आप�
16:45
एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक �
17:15
पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर एक पर �
17:45
तो यहाँ पर सेट डी एसी अच्छा एक चीज मैं करता हूँ इसको ऐसे कर देता हूँ इसको यहाँ पर वैल्यू इस एकपल टू यहाँ पर मैं लिखोंगा डी एसी ठीक है और यह चीज मैं हटा दूँगा यह से ठीक है अब मैं इसको सेव करूँगा और अभी मैं यह�
18:15
क्यों नहीं कर रहा है यहाँ पर नेम इस इकल टू डी एसी नहीं दिया है ठीक है जोकि मुझे देना चीज है तो मैं नेम इस इकल टू डी एसी यहाँ पर दूँगा और इसको मैं रिलोड करूँगा और यहाँ पर मैं वन डालूँगा यहाँ पर यह डालूँगा यहा�
18:45
यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यह�
19:15
यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यहाँ पर यह�
19:45
हमारी यहाँ पर है, मैं सब यह बन करता हूँ, मैं इसे कॉपी करूंगा, यहाँ पर पेस्ट करूंगा, और यहाँ पर पोस्ट रिक्वेस्ट, आप्लिकेशन, जेसन और जो हमारा डेटा है, डेटा क्या होने वाला है हमारा, डेटा हमारा यह होने वाला है, फोन, नेम, �
20:15
समिट हो जाना चाहिए, लेटस ट्राइ इस आउट, लेटस ट्राइ इस आउट, समिट, और समिट करने पर, क्या कुछ मिल रहा है कणसोल पर, सेंटेक्स एरर, अनेकस्टेक्टिट एंड व जेसन इन्पूट, यह क्या हो रहा है, जेसन डट स्ट्रिंगिफाई डेटा, �
20:45
तो मैं इसको response.txt करदूंगा, ठीक है, और अब अगर मैं इसको समिट करूँ, तो यह देखो सक्सेस, ठीक है, क्या एक जेसन फाइल बन�
20:53
आपको बना जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत �
21:23
बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत ब�
21:53
जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जा�
22:23
है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, यह बहुत बड़ा जाना है, �
22:53
अगर आप लोगों ने नेक्स जेस की प्लेइलिस्ट एकसेस नहीं करें अभी तक, जरूर करना, अभी करना, और बुकमार्ग भी कर लेना इस प्लेइलिस्ट को
22:59
रखना चाहिए आपको बहुत बड़ा जाना है आपको बहुत बड़ा जाना है आपको बहुत बड़ा जाना है आपको बहुत बड़ा जाना है आपको बहुत बढ़ा जाना है आपको बहुत बढ़ा जाना है आपको बहुत बढ़ा जाना है आपको बहुत बढ़ा जाना �
#Intelligent Personal Assistants