Theory
બદલાતા પાનાનું રહસ્ય
તમારી personal portfolio ની site વિશે વિચારો. જ્યારે તમે તમારું 'About Me' પાનું જુઓ, એ આજે બિલકુલ કાલ જેવું જ દેખાય છે. હવે, તમારા BCA ના semester નાં પરિણામો તપાસવા તમારા university ના exam portal માં login કરવાનું વિચારો. તમે અને તમારો સહપાઠી બિલકુલ એ જ URL ટાઈપ કરો છો, પણ તમને તમારા marks દેખાય છે, અને એમને એમના. એ જ web નું સરનામું જુદા લોકોને તદ્દન જુદી માહિતી કેવી રીતે દેખાડે છે?
Theory
નોટિસ બોર્ડ સામે Restaurant નું Menu
એક static website એ તમારી college ના છપાયેલા નોટિસ બોર્ડ જેવી છે. સંદેશો પિન કરેલો છે, અને પાસેથી પસાર થતું દરેક જણ બિલકુલ એ જ લખાણ વાંચે છે જ્યાં સુધી કોઈ professor હાથે કાગળ ન બદલે. એક dynamic website એ digital restaurant ના menu ની screen જેવી છે. જ્યારે તમે વિકલ્પો પસંદ કરો, screen તમે શું click કર્યું, રસોડાના database માં હાલમાં શું ઉપલબ્ધ છે, અને કોણ order કરે છે એના આધારે real time માં update થાય છે.
Theory
Static અને Dynamic Websites ની વ્યાખ્યા
University ની પરીક્ષાઓમાં, તમારે websites ને બે મુખ્ય પ્રકારમાં વર્ગીકૃત કરવી પડશે. એક static website એ એક server પર સંઘરાયેલા પહેલેથી લખાયેલા HTML documents ની બનેલી છે. દરેકે દરેક મુલાકાતીને બિલકુલ એ જ file મળે છે. Content બદલવા, તમારે હાથે HTML code બદલવો પડે. એક dynamic website ચાલતાં ચાલતાં પાનાં બનાવે છે. એ દરેક user માટે એ માંગે એ જ ક્ષણે અનન્ય content જોડવા server side ની scripts અને databases વાપરે છે.
At a glance
Exam ના સંદર્ભ માટે મુખ્ય સંરચનાત્મક ભેદ.
| લક્ષણ | Static Website | Dynamic Website |
|---|---|---|
| Content | Code બદલાય નહીં ત્યાં સુધી દરેક user માટે એકસરખું | User, સમય, કે custom input ના આધારે બદલાય છે |
| મુખ્ય Tech | HTML, CSS, પાયાનું client side JavaScript | PHP, Python, SQL Databases, Node.js |
| Load થવાની ઝડપ | ખૂબ ઝડપી કારણ કે files મોકલવા તૈયાર છે | ધીમી કારણ કે પાનાં માંગ પ્રમાણે બનવાં પડે છે |
| Database | કોઈ database નું જોડાણ જરૂરી નથી | Data ને dynamically સંઘરવા એક database જોઈએ |
Theory
તમારા Portfolio ની જરૂરિયાતોનું વિશ્લેષણ
ચાલો તમારી portfolio ની site ડિઝાઇન કરીએ. તમારા home ના પાના પર તમારો bio અને project ના ફોટા છે. આ એક static પાના માટે બરાબર છે કારણ કે તમારો bio દર સેકન્ડે બદલાતો નથી. પણ જો તમે એક 'Guestbook' નું પાનું ઉમેરો જ્યાં મિત્રો પોતાનાં નામ ટાઈપ કરીને comments મૂકી શકે તો? આને એક dynamic ગોઠવણ જોઈએ. કેમ? કારણ કે પાનાએ એક user પાસેથી નવો data સ્વીકારવો પડે, એને એક database માં સાચવવો પડે, અને આગલા મુલાકાતી માટે comments ની યાદી આપોઆપ update કરવી પડે.
Quiz
તમે તમારા BCA ના project માટે એક blog બનાવી રહ્યા છો. Home page પર ટોચના 5 trending tech લેખ દેખાડવા છે, જે views ના આધારે દર કલાકે આપોઆપ update થાય છે. તમારે કયા પ્રકારનું website નું માળખું પસંદ કરવું જોઈએ?
- એક static website કારણ કે HTML files દર કલાકે પોતાની જાતે આપોઆપ update થઈ શકે છે.
- એક dynamic website કારણ કે એને એક database માંથી બદલાતો data લાવવો પડે અને હાથે code બદલ્યા વગર પાનાનું content આપોઆપ update કરવું પડે.
- એક static website કારણ કે blogs માં કોઈ user નું authentication કે login ની screens હોતી નથી.
- કોઈ પણ નહીં, કારણ કે કલાકે થતાં updates માત્ર domain provider ની settings બદલીને જ સંભાળી શકાય.
Show the answer
એક dynamic website કારણ કે એને એક database માંથી બદલાતો data લાવવો પડે અને હાથે code બદલ્યા વગર પાનાનું content આપોઆપ update કરવું પડે.
કારણ કે content ને એક developer દર કલાકે હાથે HTML file બદલ્યા વગર બદલાતા data (views) ના આધારે આપોઆપ બદલવું પડે, એક dynamic website જોઈએ. Static sites પોતાનું content બદલી શકતી નથી સિવાય કે કોઈ source ની files બદલે.
Think first
વાસ્તવિક દુનિયાનો પ્રકાર ઓળખવો
Tap કરતાં પહેલાં, Amazon ના shopping cart ના પાના વિશે વિચારો. જ્યારે તમે cart માં એક laptop ઉમેરો, cart નો કુલ સરવાળો તરત update થાય છે. આ પાનું static છે કે dynamic? 3 marks ના exam ના પ્રશ્ન માટે મનમાં તમારો જવાબ સાબિત કરો.
Show the answer
એ એક dynamic પાનું છે. Cart નું content દરેક user માટે એમની ચોક્કસ ક્રિયાઓ અને ઉત્પાદનના database સાથેની આપ-લે ના આધારે અનન્ય રીતે બદલાય છે. એક static પાનું લાખો જુદા ખરીદદારો માટે personalized cart ની વસ્તુઓ ક્યારેય દેખાડી ન શકે.
Watch out
JavaScript Animation ની ગેરસમજ
અહીં એક classic ફાંદો છે જ્યાં BCA students marks ગુમાવે છે. દૃશ્ય હલનચલનને dynamic માળખા સાથે ગૂંચવશો નહીં. જો તમારા portfolio માં client side JavaScript થી બનેલું એક સરકતું image નું banner કે એક ચમકતું button હોય, તો પણ એ એક static website જ છે જો દરેક મુલાકાતી બિલકુલ એ જ banner જુએ. એક site ત્યારે જ સંરચનાત્મક રીતે dynamic છે જ્યારે એનું મુખ્ય content user ના inputs, databases, કે સમયનાં પરિબળોના આધારે બદલાય.
Formula
સરખામણીના પ્રશ્ન પર પૂરા Marks મેળવો
Static સામે dynamic sites સરખાવતો એક 10 marks નો પ્રશ્ન લગભગ દરેક web technology ના પેપરમાં આવે છે. હંમેશા તમારો જવાબ 4 માપદંડ આવરી લેતા એક સુઘડ સરખામણીના table સાથે ગોઠવો: database ની જરૂરિયાત, ઝડપ, ભાષાનો stack, અને user નું personalization. Dynamic બાજુ માટે server સાથે જોડાયેલા database ના ચિહ્નનો એક સાદો પ્રવાહ દોરીને પૂરું કરો.
Theory
આગલા Semester તરફ નજર
અત્યારે Semester 2 માં, તમે પાયાનું HTML અને CSS વાપરીને એક static portfolio બનાવી રહ્યા છો. ઝડપ માટે અને hosting નો ખર્ચ શૂન્ય રાખવા આ ઉત્તમ છે. Semester 3 માં, તમે અદ્યતન backend scripts વાપરીને webpages ને ખરેખરાં databases સાથે જોડશો. અત્યારે આ સીમા સમજવાથી તમારું full stack development તરફનું સંક્રમણ સંપૂર્ણપણે સરળ બનશે.
Summary
Key takeaways
- Static websites પહેલેથી લખાયેલી HTML files સીધી browser ના client ને પહોંચાડે છે.
- Dynamic websites server ની scripts અને databases વાપરીને users માટે ખાસ ઘડેલાં પાનાં બનાવે છે.
- Static sites ઝડપી load થાય છે અને host કરવામાં સરળ છે પણ update કરવા હાથે code બદલવો પડે છે.
- Dynamic sites social media ના feeds કે portal ના dashboards જેવા personalized user ના અનુભવો શક્ય બનાવે છે.
- Interactive user interface ની animations ઉમેરવાથી એક static site dynamic બની જતી નથી.
- Memory Hook: Static એ છપાયેલું પુસ્તક છે: dynamic એ જીવંત વાતચીત છે.