विंडोज में HTML, CSS, PHP सीखने के लिए विकास के वातावरण को कॉन्फ़िगर करें।

(लेख लिंक्डइन.कॉम (अलेक्जेंडर पानोव) पर प्रकाशित हुआ है)

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

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

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

शुरू करना

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

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

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

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

और बात यह है। डब्ल्यूएमपी-असेंबली का वातावरण वास्तविक वातावरण से काफी अलग है, जो वेब होस्टिंग पर है, जिस पर आपकी तैयार साइट स्थित होगी। वेब होस्टिंग वातावरण आमतौर पर UNIX जैसी प्रणालियों (लिनक्स, CentOS, इत्यादि) पर आधारित एक प्रणाली है, यह अक्सर IIS वेब सर्वर से कम होता है, और WAMP- असेंबली का उपयोग करते समय हमें विंडोज़ वातावरण मिलता है जिसका वास्तविक से कोई लेना-देना नहीं है। पर्यावरण नहीं करता है। मेरे व्यवहार में, मैं एक गवाह था जब WAMP- असेंबलियों ने लोगों के साथ हस्तक्षेप किया।

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

मैं उसे जांचने के लिए कहता हूं कि पृष्ठ चित्रों को कहां लोड करता है, और निरपेक्ष रास्तों के लिए php स्क्रिप्ट की भी जांच करता है। जब वह इसे ठीक करता है, तो सब कुछ काम करता है। लेकिन यह प्रतिक्रिया का एक सरल रूप है, और यदि यह एक ऑनलाइन स्टोर साइट है, तो 400 पर पेज?

या दूसरा उदाहरण।

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

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

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

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

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

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

इसलिए, विकास का एक दूसरा मार्ग है। अपने कंप्यूटर वैग्रांट पर स्थापित करें, इसे आधिकारिक साइट ( http://www.vagrantup.com/downloads.html ) से डाउनलोड करें। वैग्रांट एक एप्लिकेशन है जो आपको वर्चुअल मशीनों का प्रबंधन करने में मदद करता है। स्थापित? यदि आपको PowerShell संस्करण की असंगति के बारे में कोई त्रुटि मिलती है, तो प्रबंधन फ़्रेमवर्क ( https://www.microsoft.com/en-US/download/details.aspx?id=50395 ) को अपडेट करें । स्थापित? बहुत बढ़िया।

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

एक कंसोल खुलेगा जिसमें आप कमांड दर्ज करेंगे: git clone https://github.com/abyss-soft/webdev और "एंटर" पर क्लिक करें।

उसके बाद, आपके पास इस फ़ाइल ट्री के साथ डिस्क पर हमारा काम करने वाला फ़ोल्डर था:

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

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

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

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

1. सीधा लिंक: https://github.com/abyss-soft/webdev/archive/master.zip
2. गिथब का संदर्भ: 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", सर्वर फ़ील्ड में हमने अभी बनाया सर्वर का नाम चुनें, स्टार्ट यूआरएल और आप उस ब्राउज़र का भी चयन कर सकते हैं जिसमें xdebug सत्र खोला जाएगा।

महत्वपूर्ण!

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

हमें ब्राउज़र में एक अतिरिक्त एक्सटेंशन स्थापित करने की भी आवश्यकता है। ऐसा करने के लिए, ब्राउज़र डीबगिंग एक्सटेंशन ( https://confluence.jetbrains.com/display/PhpStorm/Browser+Debugging+Extensions ) के साथ आधिकारिक JetBrains पृष्ठ पर जाएं और अपने ब्राउज़र पर वांछित एक्सटेंशन डाउनलोड करें।

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

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

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

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

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

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

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

$ x = 2;

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

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

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

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