JQuery & Bootstrap ഉപയോഗിച്ച് ഒരു മൊബൈൽ-സൗഹൃദ ആപ്പ് എങ്ങനെ എഴുതാം
ഈ സീരീസിന്റെ ഭാഗം 1-ൽ, ഞങ്ങളുടെ IDE ആയി Netbeans ഉപയോഗിച്ച് ഞങ്ങൾ ഒരു അടിസ്ഥാന HTML 5 പ്രോജക്റ്റ് സജ്ജീകരിച്ചു, കൂടാതെ ഭാഷയുടെ ഈ പുതിയ സ്പെസിഫിക്കേഷനിൽ ചേർത്തിട്ടുള്ള കുറച്ച് ഘടകങ്ങളും ഞങ്ങൾ അവതരിപ്പിച്ചു.
[ നിങ്ങൾക്ക് ഇതും ഇഷ്ടപ്പെടാം: ലിനക്സിലെ സി/സി++ പ്രോഗ്രാമിംഗ് അല്ലെങ്കിൽ സോഴ്സ് കോഡ് എഡിറ്റർമാർക്കുള്ള 27 മികച്ച ഐഡിഇകൾ ]
കുറച്ച് വാക്കുകളിൽ, HTML പേജുകളിൽ ക്ലയന്റ്-സൈഡ് സ്ക്രിപ്റ്റിംഗ് വളരെ ലളിതമാക്കാൻ കഴിയുന്ന ഒരു ക്രോസ്-ബ്രൗസറും ക്രോസ്-പ്ലാറ്റ്ഫോം ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയും ആയി നിങ്ങൾക്ക് jQuery ചിന്തിക്കാം. മറുവശത്ത്, മൊബൈൽ-സൗഹൃദവും പ്രതികരിക്കുന്നതുമായ വെബ് പേജുകൾ സൃഷ്ടിക്കുന്നതിന് HTML, CSS, Javascript ടൂളുകൾ എന്നിവ സമന്വയിപ്പിക്കുന്ന ഒരു സമ്പൂർണ്ണ ചട്ടക്കൂട് എന്ന് ബൂട്ട്സ്ട്രാപ്പിനെ വിശേഷിപ്പിക്കാം.
ഈ ലേഖനത്തിൽ, HTML 5 കോഡ് കൂടുതൽ എളുപ്പത്തിൽ എഴുതുന്നതിനുള്ള വിലമതിക്കാനാവാത്ത രണ്ട് യൂട്ടിലിറ്റികളായ jQuery, Bootstrap എന്നിവ ഞങ്ങൾ നിങ്ങളെ പരിചയപ്പെടുത്തും. JQuery ഉം Bootstrap ഉം MIT, Apache 2.0 ലൈസൻസുകൾക്ക് കീഴിലാണ്, GPL-ന് അനുയോജ്യമായതും അങ്ങനെ സ്വതന്ത്ര സോഫ്റ്റ്uവെയറുമാണ്.
ഈ പരമ്പരയിലെ ഒരു ലേഖനത്തിലും അടിസ്ഥാന HTML, CSS, Javascript ആശയങ്ങൾ ഉൾപ്പെടുത്തിയിട്ടില്ല എന്നത് ശ്രദ്ധിക്കുക. മുന്നോട്ട് പോകുന്നതിന് മുമ്പ് ഈ വിഷയങ്ങൾ വേഗത്തിൽ മനസ്സിലാക്കണമെന്ന് നിങ്ങൾക്ക് തോന്നുന്നുവെങ്കിൽ, W3Schools-ലെ HTML 5 ട്യൂട്ടോറിയൽ ഞാൻ വളരെ ശുപാർശ ചെയ്യുന്നു.
ഞങ്ങളുടെ പ്രോജക്റ്റിൽ jQuery, Bootstrap എന്നിവ ഉൾപ്പെടുത്തുന്നു
jQuery ഡൗൺലോഡ് ചെയ്യാൻ, http://jquery.com എന്നതിലെ പ്രോജക്റ്റിന്റെ വെബ്uസൈറ്റിലേക്ക് പോയി ഏറ്റവും പുതിയ സ്ഥിരതയുള്ള പതിപ്പിനായുള്ള അറിയിപ്പ് പ്രദർശിപ്പിക്കുന്ന ബട്ടണിൽ ക്ലിക്കുചെയ്യുക.
ഈ ഗൈഡിലെ ഈ രണ്ടാമത്തെ ഓപ്ഷനുമായി ഞങ്ങൾ പോകും. ഇതുവരെ ഡൗൺലോഡ് ലിങ്കിൽ ക്ലിക്ക് ചെയ്യരുത്. നിങ്ങൾക്ക് jQuery-യുടെ കംപ്രസ് ചെയ്uത .min.js അല്ലെങ്കിൽ കംപ്രസ് ചെയ്യാത്ത .js പതിപ്പ് ഡൗൺലോഡ് ചെയ്യാൻ കഴിയുമെന്ന് നിങ്ങൾ ശ്രദ്ധിക്കും.
ആദ്യത്തേത് വെബ്uസൈറ്റുകൾക്കായി പ്രത്യേകം ഉദ്ദേശിച്ചുള്ളതാണ്, കൂടാതെ പേജുകളുടെ ലോഡ് സമയം കുറയ്ക്കാൻ സഹായിക്കുന്നു (അതിനാൽ Google നിങ്ങളുടെ സൈറ്റിനെ മികച്ച റാങ്ക് ചെയ്യും), രണ്ടാമത്തേത് വികസന ആവശ്യങ്ങൾക്കായി കോഡർമാരെയാണ് ലക്ഷ്യമിടുന്നത്.
സംക്ഷിപ്തതയ്ക്കും ഉപയോഗത്തിന്റെ എളുപ്പത്തിനും വേണ്ടി, ഞങ്ങളുടെ സൈറ്റ് ഘടനയ്ക്കുള്ളിലെ സ്ക്രിപ്റ്റ് ഫോൾഡറിലേക്ക് കംപ്രസ് ചെയ്ത (മിനിഫൈഡ് എന്നും അറിയപ്പെടുന്നു) പതിപ്പ് ഞങ്ങൾ ഡൗൺലോഡ് ചെയ്യും.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
ഇപ്പോൾ ഞങ്ങളുടെ പ്രോജക്uറ്റിലേക്ക് ബൂട്ട്uസ്uട്രാപ്പ് ചേർക്കാനുള്ള സമയമായി. http://getbootstrap.com എന്നതിലേക്ക് പോയി ഡൗൺലോഡ് ബൂട്ട്സ്ട്രാപ്പിൽ ക്ലിക്ക് ചെയ്യുക. അടുത്ത പേജിൽ, ഒരു zip ഫയലിൽ, ഉപയോഗിക്കാൻ തയ്യാറായ, മിനിഫൈഡ് ഘടകങ്ങൾ ഡൗൺലോഡ് ചെയ്യാൻ താഴെ സൂചിപ്പിച്ചതുപോലെ ഹൈലൈറ്റ് ചെയ്ത ഓപ്ഷനിൽ ക്ലിക്ക് ചെയ്യുക:
ഡൗൺലോഡ് പൂർത്തിയാകുമ്പോൾ, നിങ്ങളുടെ ഡൗൺലോഡ് ഫോൾഡറിലേക്ക് പോയി ഫയൽ അൺസിപ്പ് ചെയ്യുക, ഹൈലൈറ്റ് ചെയ്uത ഫയലുകൾ നിങ്ങളുടെ പ്രോജക്uറ്റിനുള്ളിലെ സൂചിപ്പിച്ച ഡയറക്uടറികളിലേക്ക് പകർത്തുക:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
ഇപ്പോൾ പ്രോജക്റ്റ് ഘടനയിലെ ബന്ധപ്പെട്ട ഫോൾഡറുകളിലേക്ക് CSS, JS ഫയലുകൾ പകർത്തുക.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
നിങ്ങൾ ഇപ്പോൾ Netbeans-ൽ നിങ്ങളുടെ സൈറ്റിന്റെ ഘടന വികസിപ്പിക്കുകയാണെങ്കിൽ, അത് ഇനിപ്പറയുന്ന രീതിയിൽ കാണപ്പെടും:
റഫറൻസുകൾ ചേർക്കുന്നു
അത് തീർച്ചയായും മികച്ചതായി തോന്നുന്നു, പക്ഷേ ആ ഫയലുകളൊന്നും ഉപയോഗിക്കാൻ ഞങ്ങൾ ഇപ്പോഴും ഞങ്ങളുടെ index.html ഫയലിനോട് പറഞ്ഞിട്ടില്ല. ലാളിത്യത്തിനായി, ഞങ്ങൾ ആദ്യം ആ ഫയലിന്റെ ഉള്ളടക്കം ഒരു barebones html ഫയൽ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കും:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
തുടർന്ന്, ഇനിപ്പറയുന്ന സ്uക്രീൻകാസ്റ്റിൽ നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ടാഗുകൾക്കുള്ളിൽ, പ്രോജക്റ്റ് നാവിഗേറ്റർ വിഭാഗത്തിൽ നിന്ന് ഓരോ ഫയലും കോഡിലേക്ക് വലിച്ചിടുക. ബൂട്ട്uസ്uട്രാപ്പിന്റെ റഫറന്uസിന് മുമ്പായി jQuery-യെക്കുറിച്ചുള്ള പരാമർശം ദൃശ്യമാണെന്ന് ഉറപ്പാക്കുക, കാരണം രണ്ടാമത്തേത് മുമ്പത്തേതിനെ ആശ്രയിച്ചിരിക്കുന്നു:
അത്രയേയുള്ളൂ - നിങ്ങൾ jQuery, Bootstrap എന്നിവയിലേക്ക് റഫറൻസുകൾ ചേർത്തു, ഇപ്പോൾ കോഡ് എഴുതാൻ തുടങ്ങാം.
നിങ്ങളുടെ ആദ്യ പ്രതികരണ കോഡ് എഴുതുന്നു
നമുക്ക് ഇപ്പോൾ ഒരു നാവിഗേഷൻ ബാർ ചേർത്ത് അത് നമ്മുടെ പേജിന്റെ മുകളിൽ സ്ഥാപിക്കാം. ഡമ്മി ടെക്uസ്uറ്റിനൊപ്പം 4-5 ലിങ്കുകൾ ഉൾപ്പെടുത്താൻ മടിക്കേണ്ടതില്ല, തൽക്കാലം ഇത് ഒരു ഡോക്യുമെന്റിലേക്കും ലിങ്ക് ചെയ്യരുത് - ഡോക്യുമെന്റിന്റെ ബോഡിക്കുള്ളിൽ ഇനിപ്പറയുന്ന കോഡ് സ്uനിപ്പെറ്റ് ചേർക്കുക.
Netbeans-ലെ സ്വയമേവ പൂർത്തിയാക്കൽ ഫീച്ചർ പരിചയപ്പെടാൻ കുറച്ച് സമയം ചെലവഴിക്കാൻ മറക്കരുത്, നിങ്ങൾ ടൈപ്പ് ചെയ്യാൻ തുടങ്ങുമ്പോൾ തന്നെ ബൂട്ട്uസ്uട്രാപ്പ് ലഭ്യമാക്കുന്ന ക്ലാസുകൾ ഇത് കാണിക്കും.
ചുവടെയുള്ള കോഡ് സ്uനിപ്പെറ്റിന്റെ ഹൃദയഭാഗത്ത് ബൂട്ട്uസ്uട്രാപ്പ് കണ്ടെയ്uനർ ക്ലാസ് ആണ്, ഇത് ഒരു തിരശ്ചീന കണ്ടെയ്uനറിനുള്ളിൽ ഉള്ളടക്കം സ്ഥാപിക്കാൻ ഉപയോഗിക്കുന്നു, അത് കാണുന്ന സ്uക്രീനിന്റെ വലുപ്പത്തെ ആശ്രയിച്ച് യാന്ത്രികമായി വലുപ്പം മാറ്റും. കണ്ടെയ്uനർ-ഫ്ലൂയിഡ് ക്ലാസിന് അത്ര പ്രാധാന്യമില്ല, അത് സ്uക്രീനിന്റെ മുഴുവൻ വീതിയും ഉള്ളിലുള്ള ഉള്ളടക്കം ഉൾക്കൊള്ളുന്നുവെന്ന് ഉറപ്പാക്കും.
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
ബൂട്ട്uസ്uട്രാപ്പിന്റെ മറ്റൊരു സവിശേഷത, അത് HTML കോഡിലെ പട്ടികകളുടെ ആവശ്യം ഇല്ലാതാക്കുന്നു എന്നതാണ്. പകരം, ഉള്ളടക്കം ലേഔട്ട് ചെയ്യുന്നതിന് ഇത് ഒരു ഗ്രിഡ് സിസ്റ്റം ഉപയോഗിക്കുന്നു കൂടാതെ വലുതും ചെറുതുമായ ഉപകരണങ്ങളിൽ (ഫോണുകൾ മുതൽ വലിയ ഡെസ്uക്uടോപ്പ് അല്ലെങ്കിൽ ലാപ്uടോപ്പ് സ്uക്രീനുകൾ വരെ) ശരിയായി കാണപ്പെടുന്നു.
ബൂട്ട്സ്ട്രാപ്പിന്റെ ഗ്രിഡ് സിസ്റ്റത്തിൽ, സ്ക്രീൻ ലേഔട്ട് 12 നിരകളായി തിരിച്ചിരിക്കുന്നു:
ഒരു സാധാരണ സജ്ജീകരണത്തിൽ 12-കോളം ലേഔട്ട് 4 കോളങ്ങൾ വീതമുള്ള 3 ഗ്രൂപ്പുകളായി തിരിച്ചിരിക്കുന്നു, ഇനിപ്പറയുന്ന രീതിയിൽ:
ഈ വസ്തുത കോഡിൽ സൂചിപ്പിക്കാൻ, ഇടത്തരം വലിപ്പമുള്ള ഉപകരണങ്ങളിൽ (ലാപ്uടോപ്പുകൾ പോലുള്ളവ) തുടങ്ങി അതിനു മുകളിലുള്ളവയിൽ അത് പ്രദർശിപ്പിക്കുന്നതിന്, ക്ലോസിംഗ് ടാഗിന് താഴെ ഇനിപ്പറയുന്ന കോഡ് ചേർക്കുക:
...
</nav>
<div class="row">
<div class="col-md-4">This is the text in GROUP 1</div>
<div class="col-md-4">This is the text in GROUP 2</div>
<div class="col-md-4">This is the text in GROUP 3</div>
</div>
</div> <!--Closing tag of the container class -->
ബൂട്ട്uസ്uട്രാപ്പ് ഗ്രിഡിലെ കോളം ക്ലാസുകൾ നിർദ്ദിഷ്ട ഉപകരണ വലുപ്പത്തിനും അതിനു മുകളിലുമുള്ള ആരംഭ ലേഔട്ടിനെ സൂചിപ്പിക്കുന്നത് നിങ്ങൾ ശ്രദ്ധിച്ചിരിക്കാം, ഈ ഉദാഹരണത്തിൽ md എന്നത് ഇടത്തരം (lg അല്ലെങ്കിൽ വലിയ ഉപകരണങ്ങളും ഉൾക്കൊള്ളുന്നു) സൂചിപ്പിക്കുന്നു.
ചെറിയ ഉപകരണങ്ങൾക്ക് (sm, xs), ഉള്ളടക്ക ഡിവികൾ അടുക്കിവെച്ച് അടുത്തതിന് മുകളിൽ ഒന്ന് ദൃശ്യമാകും.
ഇനിപ്പറയുന്ന സ്uക്രീൻകാസ്റ്റിൽ, നിങ്ങളുടെ പേജ് ഇപ്പോൾ എങ്ങനെയായിരിക്കണമെന്ന് നിങ്ങൾക്ക് കാണാൻ കഴിയും. ഭാഗം 1-ൽ ഞങ്ങൾ പഠിച്ചതുപോലെ, റൺ പ്രോജക്റ്റ് ബട്ടൺ ഉപയോഗിച്ച് പ്രോജക്റ്റ് സമാരംഭിച്ചതിന് ശേഷം വ്യത്യസ്ത സ്uക്രീൻ വലുപ്പങ്ങൾ അനുകരിക്കാൻ നിങ്ങളുടെ ബ്രൗസറിന്റെ വിൻഡോയുടെ വലുപ്പം മാറ്റാനാകുമെന്നത് ശ്രദ്ധിക്കുക.
സംഗ്രഹം
അഭിനന്ദനങ്ങൾ! നിങ്ങൾ ഇപ്പോൾ ഒരു ലളിതവും എന്നാൽ പ്രവർത്തനപരവും പ്രതികരിക്കുന്നതുമായ ഒരു പേജ് എഴുതിയിരിക്കണം. ഈ ചട്ടക്കൂടിന്റെ പരിധിയില്ലാത്ത പ്രവർത്തനത്തെക്കുറിച്ച് കൂടുതൽ പരിചയപ്പെടാൻ ബൂട്ട്സ്ട്രാപ്പ് വെബ്സൈറ്റ് പരിശോധിക്കാൻ മറക്കരുത്.
എല്ലായ്പ്പോഴും എന്നപോലെ, നിങ്ങൾക്ക് ഒരു ചോദ്യമോ അഭിപ്രായമോ ഉണ്ടെങ്കിൽ, ചുവടെയുള്ള ഫോം ഉപയോഗിച്ച് ഞങ്ങളെ ബന്ധപ്പെടാൻ മടിക്കേണ്ടതില്ല.