वेब डेवलपर्स के लिए काम करने के माहौल को जल्दी से कैसे बनाया जाए या विंडोज पर HTML, CSS, PHP काम करने या सीखने के लिए एक विकास का माहौल तैयार किया जाए।

( लिंकडिन पर प्रकाशित लेख)

यह असेंबलर और रिवर्सिंग कार्यक्रमों पर पुस्तकों के लेखक के लेख का मेरा अनुवाद है। अब यह मुख्य रूप से संयुक्त राज्य अमेरिका में प्रकाशित हुआ है। मुझे लगता है कि यह शुरुआती के लिए उपयोगी होगा और न केवल।

नौसिखिया प्रोग्रामर हमेशा आश्चर्य करते हैं कि वेब साइट कैसे बनाना सीखना शुरू करें। इंटरनेट पर एक खोज बहुत सारी विविध जानकारी प्रदान करती है, लेकिन दुर्भाग्य से यह केवल शुरुआती डेवलपर्स को और भी अधिक भ्रमित करती है। 5 साल से अधिक के शिक्षण अनुभव के बाद, मैंने कई बार देखा है कि कैसे छात्र, कंप्यूटर गेम में ब्रेक लेते हैं और वेब डेवलपर बनने का निर्णय लेते हैं, विकास के वातावरण को स्थापित करने की कोशिश करते हैं। उन्होंने लेआउट कार्यक्रमों को क्रमबद्ध करना शुरू किया। उन्होंने उदात्त पाठ, नोटपैड ++, विज़ुअल स्टूडियो कोड, नेटबीन्स या PHPStorm पर कब्ज़ा कर लिया। हमने एक स्थानीय कंप्यूटर, जैसे डेनवर, ज़ैम्प, ओपन सर्वर, और कई अन्य लोगों पर WAMP (विंडोज, अपाचे, MySQL और PHP के लिए खड़ा है) को स्थापित करने की कोशिश की। लेकिन चूंकि एक नौसिखिया डेवलपर के सिर में कोई व्यवस्थित ज्ञान नहीं है, इसलिए कोई ट्यूनिंग अनुभव नहीं है, काफी मुश्किल से उनमें से एक सुविधाजनक विकास वातावरण स्थापित करने में कामयाब रहा, और जो सफल रहा, उसने महसूस किया कि खेलना अधिक कठिन हो गया है, क्योंकि कई अतिरिक्त स्थापित वीडियो का आनंद लेना मुश्किल है। खेल में चिकनापन।

यह लेख प्रत्येक छात्र को कई वर्षों तक समझाने के कारण पैदा हुआ था कि कैसे सब कुछ सही ढंग से और आसानी से किया जाए।

एक बार फिर मैं कहना चाहता हूं कि हम HTML, सीएसएस में साइटों के निर्माण और PHP के साथ उनके संबंधों का अध्ययन करने के लिए विंडोज में काम के माहौल को कॉन्फ़िगर करेंगे। हम ऐसे कंप्यूटर को काम करेंगे, जिससे नौसिखिया वेब डेवलपर्स को इस विचार की आदत हो कि उनका कंप्यूटर उनकी आय का स्रोत है।

शुरुआत हो रही है

मेरा मानना ​​है कि जब से आप एक वेब डेवलपर बनने का फैसला करते हैं, सबसे पहले आपको अपने कंप्यूटर पर Git इंस्टॉल करना होगा। Git एक वितरित संस्करण नियंत्रण प्रणाली है। इसके लिए मेरा शब्द लें, कि यह प्रणाली आपको एक से अधिक बार बचाएगा, खासकर जब आपको एहसास हो कि कुछ बुरी तरह से निकला है। गिट के लिए धन्यवाद, आप स्पष्ट रूप से नियंत्रित कर सकते हैं जब ऐसा हुआ और गिट आपको संपादित फ़ाइल के पिछले संस्करण में वापस रोल करने का अवसर देगा। यह सुविधाजनक है, है ना?

Windows के लिए Git ( https://gitforwindows.org/ ) को स्थापित करने, डाउनलोड करने और स्थापित करने के लिए, हम सभी पथ और डिफ़ॉल्ट सेटिंग्स छोड़ देते हैं। स्थापना के बाद, अपने कंप्यूटर को पुनरारंभ करें।

अब आप कमांड लाइन या पावरशेल का उपयोग करके गिट का उपयोग कर सकते हैं।

मैं इस नियम का पालन करता हूं कि आपको केवल अपने कामकाजी कंप्यूटर पर git और IDE इंस्टॉल करने की आवश्यकता है, जो "एकीकृत विकास वातावरण" के लिए है। बाकी सब कुछ सर्वर संस्करण में काम करना चाहिए। आप अपने आप को एक अलग WAMP सेट नहीं कर सकते। मैं इस बात पर जोर देता हूं कि मैं विशेष रूप से WAMP विधानसभाओं के बारे में बात कर रहा हूं। मैं अपनी बात समझाऊंगा। WAMP असेंबली सुविधाजनक और अच्छी हैं, लेकिन केवल तभी जब आप स्पष्ट रूप से समझते हैं कि आप सर्वर और साइट पर क्या और क्यों कर रहे हैं। शुरुआती क्योंकि उनके अनुभव अभी तक नहीं कर सकते हैं। हां, कई मंचों में पढ़ना जहां वेब डेवलपर्स, फुल स्टैक डेवलपर्स सहित, शुरुआती लोगों को सुझाव देते हैं, मुझे बहुत बार पढ़ना पड़ा कि डब्ल्यूएएमपी असेंबली बहुत सुविधाजनक है। लेकिन ऐसी सलाह पर, आप तुरंत किसी ऐसे पेशेवर से अंतर कर सकते हैं जिसने वेब विकास की दिशा में अपना पहला कदम उठाया है। एक पेशेवर कभी भी शुरुआत को सलाह नहीं देगा कि वह WAMP असेंबली स्थापित करने के लिए वेब विकास सीखे।

और यहाँ यह है। WAMP असेंबली का वातावरण, वेब-होस्ट्स के वास्तविक वातावरण से काफी भिन्न होता है, जिस पर आपकी तैयार साइट स्थित होगी। वेब-होस्टर्स का वातावरण आमतौर पर UNIX जैसी प्रणालियों (लिनक्स, CentOS, आदि) पर आधारित एक प्रणाली है, बल्कि कम अक्सर IIS वेब सर्वर होता है, और WAMP असेंबली का उपयोग करते समय, हमें एक विंडोज़ वातावरण मिलता है जिसका वास्तविक से कोई लेना-देना नहीं होता है कोई परिवेश नहीं है मेरे व्यवहार में, मैंने देखा है जब WAMP लोगों के साथ हस्तक्षेप करता है। उदाहरण के लिए, एक नौसिखिया वेब डेवलपर हमारी टीम के लिए एक WAMP विधानसभा के साथ एक होम कंप्यूटर पर साइटों को विकसित करने के लिए आया था। उनके पास तैयार लेआउट से एक पृष्ठ बनाने और उस पर एक कार्य प्रतिक्रिया फ़ॉर्म बनाने का एक सरल कार्य था। कुछ दिनों बाद वह टर्नकी समाधान लाता है। हम इसे परीक्षण सर्वर पर अपलोड करते हैं, जो उत्पादन सर्वर की एक सटीक प्रतिलिपि है और देखते हैं कि फ़ॉर्म काम नहीं करता है, और कुछ चित्र नहीं दिखाए गए हैं। हां, अनुभवी डेवलपर्स तुरंत समझ जाते हैं कि मामला क्या है, लेकिन शुरुआत करने वाले को यह समझ में नहीं आता है और उसे घबराहट होती है। वह तुरंत कहता है: "मैं नहीं समझता, मेरे घर में सब कुछ काम करता है।" मैं उसे यह जाँचने के लिए कहता हूँ कि पृष्ठ कहाँ से चित्र लोड करता है, और निरपेक्ष रास्तों के लिए php स्क्रिप्ट की भी जाँच करें। जब वह इसे ठीक करता है, तो सब कुछ काम करता है। लेकिन यह एक सरल फीडबैक फॉर्म है, और यदि यह एक ऑनलाइन स्टोर साइट है, तो 400 पेज? या दूसरा उदाहरण। मुझे किसी तरह उस साइट की तैनाती से निपटना पड़ा जिसे कंपनी ने फ्रीलांस से ऑर्डर किया था - डेवलपर। डेवलपर ने एक कंपनी के लिए एक व्यवसाय कार्ड साइट का आदेश दिया। जब इस डेवलपर ने अपने काम के लैपटॉप पर क्लाइंट को समाप्त ऑर्डर दिखाया, तो सब कुछ ठीक रहा, लेकिन जब इस साइट को होस्टिंग प्रदाता को स्थानांतरित कर दिया गया, तो साइट काम नहीं करती थी और कुछ पृष्ठ बस दिखाई नहीं देते थे। अनुभवी डेवलपर्स भी समझते हैं कि क्या मामला है, लेकिन यह अभी तक शुरुआती लोगों को नहीं दिया गया है, आवश्यक अनुभव की कमी के कारण। यहाँ यह पता चला है कि खिड़कियों में कोई .htaccess सपोर्ट नहीं है, CMS को काम करने के लिए आवश्यक निर्देश पंजीकृत करने के बाद, सब कुछ काम कर गया। लेकिन यह सिर्फ एक व्यवसाय कार्ड साइट था, और अगर यह एक व्यवस्थापक पैनल, बंद वर्गों, आदि के साथ एक ऑनलाइन स्टोर था? यहाँ इस सब से बचने के लिए, मैं अपने सभी छात्रों को उपयोग करने की सलाह देता हूँ, यदि पूर्ण रूप से 100% उत्पादन का वातावरण नहीं है, तो कम से कम इसके बहुत करीब है, और यह WAMP- असेंबली प्रदान नहीं कर सकता है।

मेरे पास दो पसंदीदा वातावरण हैं जिनमें मैं काम करता हूं: NetBeans और PHPStorm। जो कोई भी इसे पसंद करता है वह आप पर निर्भर है। मैं दोनों को डालने और उन पर काम करने की कोशिश करने की सलाह देता हूं। NetBeans मुफ़्त है, PHPStorm की लागत एक व्यक्तिगत डेवलपर के लिए $ 89 है, लेकिन एक 30-दिवसीय परीक्षण है, ताकि आप इसे काम पर देख सकें।

मैं एक उदाहरण के रूप में IDE PHPStorm का उपयोग करके अनुकूलन के बारे में बात करूंगा। आधिकारिक साइट से डाउनलोड करके हमारे कार्यशील कंप्यूटर पर IDE PHPStorm स्थापित करें। यहां कुछ भी जटिल नहीं है, यह सिर्फ एक विंडोज़-प्रोग्राम है, हम डिफ़ॉल्ट रूप से सभी रास्ते छोड़ देते हैं। की स्थापना की।

जैसा कि मैंने कहा, सब कुछ मेजबान के समान वातावरण में विकसित किया जाना चाहिए या इसके बहुत करीब होना चाहिए। ऐसा करने के लिए, हमें अपने कंप्यूटर पर आधिकारिक साइट से डाउनलोड करके वर्चुअलबॉक्स स्थापित करना होगा। कंप्यूटर को जटिल, डाला और पुनः आरंभ करने के लिए कुछ भी नहीं है।

फिर विकास के दो तरीके हैं

पहला तरीका यह है कि वर्चुअल बॉक्स के अंदर मैन्युअल रूप से वर्चुअल मशीन बनाई जाए, उसमें लिनक्स सर्वर स्थापित किया जाए और सर्वर पर अपाचे, मायएसक्यूएल और पीएचपी को बढ़ाया जाए। इसके अलावा, डीबगिंग के लिए, हमें वहां PHP को डीबग करने के लिए Xdebug को भी इंस्टॉल करना होगा, साथ ही साथ वर्चुअल मशीन के अंदर की निर्भरता को समझना होगा और होस्ट मशीन पर हमारे काम करने वाले फ़ोल्डर के साथ निर्भरता को भी ध्यान में रखना होगा। जब आप अनुभव प्राप्त करते हैं, तो ऐसा करना उतना मुश्किल नहीं है जितना लगता है, लेकिन उन लोगों के लिए जो WEB विकास की दिशा में अपना पहला कदम उठा रहे हैं, ये सभी अनावश्यक कठिनाइयाँ हैं।

इसलिए, विकास का एक दूसरा मार्ग है । आधिकारिक साइट से इसे डाउनलोड करके अपने कंप्यूटर पर वैग्रंट स्थापित करें। वैग्रांट एक एप्लिकेशन है जो आपको वर्चुअल मशीनों का प्रबंधन करने में मदद करता है। स्थापित? यदि आपको PowerShell संस्करण बेमेल के बारे में कोई त्रुटि मिलती है, तो प्रबंधन फ़्रेमवर्क अपडेट करें। स्थापित? बहुत बढ़िया।

इसके बाद, योनि विन्यास के साथ संग्रह डाउनलोड करें, जिसे मैंने "उबंटू सर्वर 16.04" के आधार पर तैयार किया था और जिसे मैं अपने छात्रों के लिए उपयोग करने का प्रस्ताव देता हूं। हम अपने लिए एक कार्यशील फ़ोल्डर बनाते हैं, जिसमें हम अपनी साइट बनाएंगे। उदाहरण के लिए, यह ड्राइव "सी" पर "वेबदेव" फ़ोल्डर होगा। यह कैसे करना है? उन लोगों के लिए जो पहले से ही Git स्थापित कर चुके हैं, एक्सप्लोरर में "C" ड्राइव खोलें और राइट-क्लिक करें और "Git Bash Here" चुनें ।

कंसोल खुल जाएगा, जिसमें हम कमांड दर्ज करते हैं: git क्लोन https://github.com/abyss-soft/webdev और "एंटर" दबाएं।

उसके बाद, फ़ाइलों का निम्नलिखित पेड़ के साथ हमारा तैयार कार्य फ़ोल्डर आपकी डिस्क पर दिखाई दिया:

कृपया ध्यान दें कि हमारी वेबसाइट के साथ जो फ़ोल्डर हम विकसित करेंगे, वह इस रास्ते पर स्थित है: C: \ webdev \ www \ webdev.local

भविष्य में, आप इस फ़ोल्डर की सभी फ़ाइलों को अपनी साइट की फ़ाइलों के साथ बदल सकते हैं और इस प्रकार अपनी साइट के लिए तैयार विकास वातावरण प्राप्त कर सकते हैं।

मैं यह भी सलाह देता हूं कि आप https://github.com पर रजिस्टर करें और "Fork" को मेरी रिपॉजिटरी " https://github.com/abyss-soft/webdev " बना दें, ताकि आप इसे अपने पास सहेज कर रखें और यह हमेशा आपके पास रहेगा।

जो लोग गिट स्थापित नहीं करना चाहते हैं, उनके लिए यहां सीधे लिंक दिए गए हैं:

1. सीधा लिंक: https://github.com/abyss-soft/webdev/archive/master.zip
2. Github का लिंक: https://github.com/abyss-soft/webdev
3. वैग्रंट बॉक्स लिंक: https://app.vagrantup.com/alex-panov/boxes/webdev

अगला, कमांड लाइन दुभाषिया चलाएं, इसके लिए हम विन + आर दबाएं (इस तरह से दबाएं - बटन को नीचे की ओर बाईं ओर के स्पेस के साथ विंडोज लोगो के साथ दबाएं) और इसे जारी किए बिना प्रेस आर) और कमांड "cmd" (बिना उद्धरण के) दर्ज करें। खुलने वाली विंडो में, हम cd c: \ webdev कमांड दर्ज करके अपने बनाए गए फ़ोल्डर में जाते हैं।

फ़ोल्डर में जा रहे हैं, योनि अप कमांड दर्ज करें। कंसोल बंद नहीं होता है। जब हम काम करते हैं और हमें वर्चुअल सर्वर को बंद करने की आवश्यकता होती है, तो हम योनि पड़ाव कमांड दर्ज करेंगे।

पहले लॉन्च में बहुत समय लग सकता है - छवि डाउनलोड हो जाएगी, बाद के लॉन्च के दौरान यह चरण नहीं होगा, छवि कैश से चिपकेगी। इसके बाद वर्चुअल मशीन शुरू हो जाएगी।

वर्चुअल मशीन में ही, हमारे पास PHP.ini फ़ाइल /etc/php/7.0/apache2/php.ini पर स्थित है और यह सेटिंग है:

---------- कार्य: -------

[Xdebug]

zend_extension = "/ usr / lib / php / 20151012 / xdebug.so"

xdebug.remote_autostart = पर

xdebug.remote_enable = पर

xdebug.remote_connect_back = पर

xdebug.remote_port = 9000

xdebug.remote_host = 192.168.33.31

xdebug.idekey = PHP_IDE_CONFIG

जहाँ xdebug.remote_host = 192.168.33.31 होस्ट कंप्यूटर का पता है जिस पर PHPStorm चल रहा है।
इसे लोड करने के लिए प्रतीक्षा करते हुए, हम "होस्ट" फ़ाइल में लिखेंगे (यह C: \ Windows \ System32 \ ड्राइवरों \ आदि स्थित है) लाइन: 192.168.33.33 webdev.local

इसके बाद, अपना पसंदीदा ब्राउज़र लॉन्च करें और लिंक webdev.local का अनुसरण करें

यदि सब कुछ उम्मीद के अनुसार चला गया, तो हम "PHP की गणना:" पाठ के साथ एक पृष्ठ देखेंगे जो दिखा रहा है कि हमारी परीक्षण साइट हमारे वर्चुअल मशीन में सर्वर पर भरी हुई है और काम करने के लिए तैयार है।

अगला, हमें PHPStorm में एक दूरस्थ PHP दुभाषिया कनेक्ट करने की आवश्यकता है।
ऐसा करने के लिए, PHPStorm चलाएं और एक नया प्रोजेक्ट बनाएं:

कार्यक्रम हमें बताएगा कि फ़ाइलें इस फ़ोल्डर में पहले से मौजूद हैं और पूछते हैं कि क्या हम इस फ़ोल्डर में एक प्रोजेक्ट बनाना चाहते हैं:

"हाँ" पर क्लिक करें

अगला, मेनू पर क्लिक करें "फ़ाइल" -> "सेटिंग्स ..":

और भाषा और फ्रेमवर्क अनुभाग पर जाएं और इस अनुभाग में PHP का चयन करें। इस भाग में, आपको CLI दुभाषिया खंड में IDE के लिए एक दुभाषिया निर्दिष्ट करने की आवश्यकता है [...] पर क्लिक करके

खुलने वाली विंडो में, हरे "+" पर क्लिक करें, कोई भी नाम सेट करें, उदाहरण के लिए, "दूरस्थ PHP 7" और रिमोट ... आइटम का चयन करें।

दिखाई देने वाली विंडो में, Vagrant चुनें और फ़ाइल का पथ "C: \ webdev" निर्दिष्ट करें

और ओके पर क्लिक करें।

यह विंडो दिखाई देती है, जिसमें PHP का संस्करण और डीबगर का संस्करण दिखाई देता है:

अगला, PHP अनुभाग में, सर्वर (PHP -> सर्वर) का चयन करें। हरे "+" पर क्लिक करें और किसी भी नाम दर्ज करें, उदाहरण के लिए, "webdev.local" और होस्ट नाम: "webdev.local"। पोर्ट संख्या "80" है और डिबगर "XDebug" पर सेट है। पथ मैपिंग चेकबॉक्स का उपयोग करना सुनिश्चित करें ... पथों के पत्राचार को इंगित करें:

अधिक आरामदायक डिबगिंग के लिए, या यों कहें, ताकि डीबगर किसी भी PHP फ़ाइल की पहली पंक्ति पर पॉप न हो, आपको इस फ़ंक्शन को यहां अक्षम करना होगा:

"रन" मेनू में PHPStorm पर जाएं, संपादन कॉन्फ़िगरेशन चुनें ...

खुलने वाले फॉर्म में हरे "+" पर क्लिक करें और PHP वेब एप्लिकेशन के प्रकार का चयन करें। एक नाम दर्ज करें, उदाहरण के लिए, "WebApplication", सर्वर क्षेत्र में, हमारे द्वारा बनाए गए सर्वर का नाम, स्टार्ट URL का चयन करें और आप उस ब्राउज़र का भी चयन कर सकते हैं जिसमें xdebug सत्र खुलेगा।

महत्वपूर्ण!

डिबगिंग केवल तभी चालू होती है जब PHPStorm में वायरटैपिंग सक्षम होती है। ऐसा करने के लिए, दाहिने कोने में PHP डिबग कनेक्शन्स के लिए स्टार्ट लिसनिंग पर क्लिक करें:

हमें ब्राउज़र में एक अतिरिक्त एक्सटेंशन स्थापित करने की भी आवश्यकता है। ऐसा करने के लिए, ब्राउज़र डीबगिंग एक्सटेंशन के साथ आधिकारिक JetBrains पृष्ठ पर जाएं और अपने ब्राउज़र के लिए वांछित एक्सटेंशन डाउनलोड करें।

हम ब्राउज़र में अपना एक्सटेंशन इंस्टॉल करने के बाद, इसकी सेटिंग्स खोलते हैं और idekey निर्दिष्ट करते हैं , जिसे हमने पहले ही सेटिंग में निर्दिष्ट किया है: PHP_IDE_CONFIG

PHPStorm में, श्रोता को सक्रिय करें ( PHP डिबग कनेक्शंस के लिए स्टार्ट लिसनिंग के दाएं कोने में) और Run WebApplication पर क्लिक करें। PHPStorm स्तर पर डिबगिंग शुरू की गई है।

अगला, हम डीबग एक्सटेंशन को सक्रिय करते हैं। ऐसा करने के लिए, हमारी वेबसाइट http: //webdev.local के पते पर जाएं और हमारे प्रवेश करने के बाद, बग आइकन पर क्लिक करें (पहले से ही ब्राउज़र में) और "Google Chrome" में डीबग आइटम चुनें

या मोज़िला फ़ायरफ़ॉक्स में

जिसके बाद आइकन हरा हो जाएगा।

इन सेटिंग्स के बाद, आप सुरक्षित रूप से ब्रेकपॉइंट सेट कर सकते हैं और अपने PHP साइटों को डिबग कर सकते हैं। जब हम PHPStorm में ब्रेकपॉइंट स्थापित करते हैं, तो आपको ब्राउज़र में पृष्ठ को रीफ्रेश करना होगा और देखना होगा कि यह लोड मोड में लटका हुआ है, और ब्रेकप्वाइंट PHPStorm में काम करता है।

उदाहरण के लिए, एक लाइन पर एक ब्रेकपॉइंट लगाएं

$ x = 2;

और "Run WebApplication" पर क्लिक करें:

जैसा कि आप देख सकते हैं, हमारा डिबगर हमारे ब्रेकपॉइंट पर रुक गया और हमें चर (चर) दिखाता है:

यदि हम F8 कुंजी दबाते हैं, तो हम देखेंगे कि डिबगर हमारे सभी चर दिखाते हुए कदम से कदम मिलाता है:

इस तरह, हमने अपने काम के माहौल को स्थापित और ट्यून किया जिसमें हम पूरी तरह से काम कर सकते हैं।