Pages

How to Design Login Form


Hi, Friends welcome back मै हूँ Aj as Developer | Founder and CEO of Kunch Corporation, The Software Company |



इसमे आप ToolBox से Label, Image, TextBox और CommandButton से लेकर उनकी design करना सीख जाएंगे |


Start : इसके लिए आपको DeveloperTab मे VisualBasicOpen कर एक UserForm Insert करना है | पहले मै आपको इसके कुछ Shortkey बता देता हूँ ताकि गलती से कोई Window आपसे Close हो जाये तो आप उसे दुबारा Open कर पाये | जैसे ProjectExplorer शुरु करने के लिए कंट्रोल r बटन |PropertiesWindowOpen करने के लिए F4 बटन | अगर ToolBox नहीं दिख रहा हो तो View मे जाकर ToolBox सेलेक्ट करे | ये Basic चिजे आपको ध्यान मे होनी चाहिए नहीं तो आप इन चीजों को लेकर बहुत परेशान हो सकते हो |

Step_1 –userform की Properties देखने के लिए इसको सिलैक्ट कर F4 बटन Press करे | इसमे आपको सबसे पहले CodeNameA_Login_Form करना है | इसका नाम आप अपने हिसाब से जो भी रखना हो रख सकते हो| ये CodeName आपको यहाँ भी दिखेगा | हमने Login_Form के पहले A इसलिए लगाया है | जिससे ज्यादा Form होने पर , ये Alphabetically सेट हो जाये | कोड नेम मे दो word के बीच space नहीं छोड़ सकते है | उसके लिए उसकी जगह underscore लगा सकते है |
NextUserform का BackColorBlack कर दे | फिर CaptionName मे LoginForm लिखेंगे | जिससे यहाँ form मे Userform1 की जगह LoginForm दिखेगा | अब इसकी Hightwidth अपने अनुसार set कर सकते है | मै यहाँ पर इसकी Hight 257 और width 400 कर देता हूँ |इसके बाद StartUpPosition मे जब हम manual सेलेक्ट करते है | तो रन करने पर userformTopLeftCorner से open होगा | अगर आप चाहते है रन करते ही userformCenter मे शो हो | तो StartupPosition मे CenterOwner सेलेक्ट कर दे | रन कर देख सकते है userform सेंटर से Open हो रहा है |

Login Form

Step_2 –Next हम Lebel लेकर Top मे इस तरीके से set करेंगे | अब उसमे लिखे Caption को हटा देंगे | उसका BackColor सेलेक्ट कर BordercolorWhite कर देंगे | जिससे userform का Title अच्छा दिखेंगा | अब इसी को control के साथ mouse से drage कर बॉटम मे रख उसकी height छोटी कर देंगे |userform के title के लिए एक और lable लेकर उसका Back और Bordercolornone कर देंगे | अब इसे Top मे इस तरीके से set करने के बाद उसके Fontstyle को cooperBlack कर  FontSize को 18 करेंगे | इसके बाद इसका ForeColorChange करेंगे |

Step_3 – अब इन दोनों को सेलेक्ट कर कंट्रोल के साथ drag कर इसको यहा सेट करेंगे | इसके पीछे वाले lebel का Backcolorchange करेंगे और इस label मे Fontsize छोटा कर forecolorWhite कर देंगे | इसके Caption मे AjasDeveloper कर देंगे | इसके बाद इमेज रखने के लिए ImageTool लेंगे |
अब Image को सिलैक्ट करेंगे तो PropertiesBox मे Image की Properties बताएगा और UserForm को सेलेक्ट करेंगे तो उसकी Properties बताएगा |इसके Back और Bordercolor को none करेंगे |ImageTool मे ImageInsert करने के लिए |PropertiesBox के PictureOption मे इन तीन dot को Click करना है | अब आपकी Image जिस भी Folder या Location मे पड़ी हुई है वहाँ  पर जाकर उस Image को select करना है | अब इस इमेज को back करने के लिए कंट्रोल के साथ k बटन प्रैस करेंगे | और अगर फ्रंट मे करना हो तो ShortKeyकंट्रोल Juse करते है  |

Step_4 – अब आपको इस label को कंट्रोल के साथ drag करना है | और उसके Caption मे UserID लिखना है | उसके बाद उसका FontStyle और Sizechange करना है | उसके बाद ForeColor हल्का Yellowकर देंगे |Next हम TextBox लेंगे | पहले उसका BackColorChange कर BorderWhite करेंगे |FontStyleChange करने के बाद ForeColorBlack करेंगे | अब UserID के label और TextBox को सेलेक्ट कर कंट्रोल के साथ drage करेंगे |फिर इस UserID के Caption मे Password लिख देंगे |

Step_5 –Next हम Command बटन लेंगे | जिसके Caption मे Login लिखेंगे | अब उसका BackColorChange कर FontStyleChange करेंगे | उसके बाद उसका ForeColorWhite कर देंगे | इस तरह आप देख सकते है हमने एक loginForm तैयार कर दिया है |

अब एक बार रन कर UserID और Password लिखेंगे देखो आपने बहुत सारे LoginForm देखे होंगे जिसमे PasswordStar मे शो होता है | वेसे ही अगर आप यहाँ भी PasswordStar मे शो करवाना चाहे तो इस TextBox को सिलैक्ट कर  Properties के PasswordChar मे * लिख दे | अब रन कर पासवर्ड डाल कर देखे |Password आपको Star की Form मे Show होगा |

अब हम आने वाली NextVideo मे बहुत से प्रोग्राम सीखेंगे इससे Related| जिसके लिए हमे ये Form कैसे बनाते है, ये सीखना बहूत जरूरी था |