Αρχιτεκτονική mvc στην κατασκευή eshop

Το opencart αποτελεί μια λύση ηλεκτρονικού εμπορίου βασισμένη στην αρχιτεκτονική MVC. Αυτή η ονομασία προέρχεται από τα αρχικά των Αγγλικών λέξεων Model-View-Controller. Αποτελεί ένα γενικότερο μοντέλο σχεδιασμού διαδικτυακών εφαρμογών και διαδικτυακού λογισμικού. Σε γενικές γραμμές η τάση της αγοράς είναι να χρησιμοποιούμε τέτοιου είδους πλαίσια και όχι να γράφουμε όπως θέλουμε τον κώδικα html, css και php. Το MVC είναι μια αρχιτεκτονική βασισμένη σε στρώματα. Δηλαδή, ο Controller (ελεγκτής), το Model (μοντέλο) και το View (όψη) είναι τρία στρώματα, τα οποία επικοινωνούν μεταξύ τους.

αρχιτεκτονική MVC

Τι είναι ο Controller στην αρχιτεκτονική MVC

Ο Controller είναι ο ελεγκτής, ο οποίος είναι υπεύθυνος για τον κεντρικό έλεγχο του προγράμματος. Ελέγχει τη ροή του προγράμματος. Ο Controller είναι το πρώτο στρώμα που ενεργοποιείται όταν ο χρήστης του ηλεκτρονικού καταστήματος πληκτρολογήσει μια διεύθυνση url στο πρόγραμμα περιήγησης (browser).

Τι είναι το Model στην αρχιτεκτονική MVC

Το Model ασχολείται με τα δεδομένα. Εκεί διατηρούνται τα κύρια δεδομένα του προγράμματος, όπως πληροφορίες από αντικείμενα βάσης δεδομένων και ερωτήματα SQL. Όλα τα δεδομένα που απαιτούνται για την παρουσίαση μιας σελίδας στο χρήστη αποκτώνται από τα μοντέλα. Ωστόσο, όταν χρησιμοποιούμε το πλαίσιο MVC δεν μπορούμε να έχουμε απευθείας πρόσβαση στα δεδομένα.

Τι είναι το View στην αρχιτεκτονική MVC

Το View είναι η όψη ή αλλιώς προβολή, και αρμοδιότητά του είναι η παρουσίαση της τελικής σελίδας στο χρήστη. Αποτελεί το τελευταίο επίπεδο της αρχιτεκτονικής MVC που ευθύνεται για τη διεπαφή χρήστη του προγράμματος. Στις διαδικτυακές εφαρμογές, το View περιέχει HTML, CSS, JavaScript, XML ή JSON κλπ. Το View είναι ένα ορατό στρώμα για το χρήστη, ενώ τα μοντέλα και οι ελεγκτές είναι κρυμμένα από το χρήστη.

Παράδειγμα MVC σε eshop

Ας υποθέσουμε οτι έχουμε κάνει κατασκευή eshop με το opencart το οποίο χρησιμοποιεί την αρχιτεκτονική Model-View-Controller. Ο χρήστης κάνει κλικ σε κάποιο link ή κάποιο button στο πρόγραμμα περιήγησης, και ακολούθως ανοίγει μια νέα σελίδα στο ηλεκτρονικο κατάστημα. Για παράδειγμα, κάνει κλικ σε μια κατηγορία, και ανοίγει η σελίδα της κατηγορίας, η οποία παρουσιάζει όλα τα προίόντα της συγκεκτριμένης κατηγορίας του eshop. Για να γίνει αυτό θα πρέπει να γίνει μια σειρά ενεργειών όπως φαίνεται στο ακόλουθο παράδειγμα.

Ροή δεδομένων στην αρχιτεκτονική MVC του opencart

Ο Controller λαμβάνει το μήνυμα από το πρόγραμμα περιήγησης. Στη συνέχεια ο Controller ζητάει τα δεδομένα από το Model. Ακολούθως το Model εκτελεί το αίτημα και επιστρέφει τα δεδομένα στον εν λόγω ελεγκτή. Δηλαδή το Model απαντάει στέλνοντας στον Controller τα δεδομένα που ζήτησε. Ο έλεγχος επέστρεψε στον Controller, ο οποίος στη συνέχεια είτε θα παρουσιάσει το αποτέλεσμα στο χρήστη, μέσω του View, είτε θα ζητήσει κι άλλα δεδομένα από το Model.

Πού βρίσκονται όλα αυτά στο Opencart

Η αρχιτεκτονική model view controller εκφράζεται ξεκάθαρα από τη δομή φακέλων στο opencart. Για να το δούμε αυτό μπορούμε να ανοίξουμε ένα πρόγραμμα ftp όπως το filezilla, ή απλά να ανοίξουμε το file manager. Στη συνέχεια θα μπούμε στο φάκελο catalog. Τότε θα δούμε οτι εκεί υπάρχουν τρεις φάκελοι. Ο πρώτος ονομάζεται controller, ο δεύτερος ονομάζεται model και ο τρίτος ονομάζεται view. Καθένας από αυτούς τους φακέλους διατηρεί αρχεία που εκτελουν διαδικασίες controller, διαδικασίες model η διαδικασίες view αντίστοιχα. Συνεπώς ανάλογα με την εργασία που θέλουμε να κάνουμε θα πρέπει να μεταβούμε και αντίστοιχο φάκελο και στη συνέχεια να αναζητήσουμε τα σχετικά αρχεία. Οι φάκελοι αυτοί δημιουργήθηκαν κατά την εγκατάσταση του opencart

αρχιτεκτονική MVC στο file manager

Απλό παράδειγμα κατανόησης MVC στο opencart

Όλα όσα είπαμε μέχρι τώρα ενδεχομένως να είναι αρκετά μπερδεμένα. Θα γίνουν πολύ καταναλωτικά με ένα πολύ απλό παράδειγμα. Θα δημιουργήσουμε ένα δικό μας απλό controller ο οποίος θα παρουσιάσει δεδομένα στο χρήστη. Για παράδειγμα δημιουργήσουμε ένα controller με όνομα test. Προφανώς η δημιουργία του controller θα γίνει στον αντίστοιχο φάκελο, δηλαδή θα είναι υπο-φάκελος του φακέλου controller. Αυτό σημαίνει ότι θα πάμε στο file manager, Θα ανοίξουμε το φάκελο controller και θα δημιουργήσουμε ένα φάκελο με όνομα test. Μέσα στο φάκελο θα δημιουργήσουμε ένα php αρχείο με όνομα abc.php. Και μέσα στο αρχείο θα γράψουμε τον ακόλουθο κώδικα php:

php κώδικας του controller στο mvc

Ο νέος controller που μόλις δημιουργήσαμε είναι έτοιμος. θα το δούμε σε δράση θα πρέπει να πάμε στη γραμμή διευθύνσεων του προγράμματος περιήγησης και να πληκτρολογήσουμε:

https://online-lessons.gr/eshop/index.php?route=test/abc

Η διεύθυνση αυτή προκύπτει ως εξής:

Αρχικά γράφουμε τη διεύθυνση του e-shop:

https://online-lessons.gr/eshop/

Και στη συνέχεια δίνουμε τη διεύθυνση του controller και του αντίστοιχου αρχείου

index.php?route=test/abc

Εάν όλα πάνε καλά τότε θα δούμε το αποτέλεσμα στο πρόγραμμα περιήγησης. Εμείς το εφαρμόσαμε και παρουσιάζουμε εδώ το αποτέλεσμα:

ο νέος controller του eshop στην πράξη

Γιατί χρειάζεται να κατανοήσω την αρχιτεκτονική mvc

Πρώτα από όλα συνιστούμε θερμά να κάνετε αυτό το απλό παράδειγμα που μόλις παρουσιάσαμε. Ο λόγος είναι απλός. Όταν κάποιος δει τη δομή των φακέλων, ανεβάσει το πρώτο αρχείο και το δει να παίζει στο φυλλομετρητή του υπολογιστή του τότε έχει κατανοήσει ένα μεγάλο κομμάτι της αρχιτεκτονικής. Και στη συνέχεια είναι έτοιμος να προχωρήσει σε πραγματικές αλλαγές αρχείων του ηλεκτρονικού του καταστήματος. Όλοι λίγο-πολύ έχουμε κάποιες γνώσεις html και css. Αυτή η γνώση μας δίνει την ψευδαίσθηση ότι μπορούμε να κάνουμε μόνοι μας αλλαγές στο ηλεκτρονικό μας κατάστημα πειράζοντας τα αντίστοιχα αρχεία php.

Λίγο πολύ όλοι γνωρίζουμε ότι η γλώσσα php χρησιμοποιείται για να εμφανίσει το html και το css στο φυλλομετρητή. Λίγο πολύ όλοι γνωρίζουμε τη γλώσσα php και νομίζουμε οτι μπορούμε να παίξουμε με τα αντίστοιχα κομμάτια html. Αυτή η λογική όμως δεν ισχύει όταν έχει χρησιμοποιηθεί η αρχιτεκτονική για τη δημιουργία του ηλεκτρονικού καταστήματος ή της οποιασδήποτε διαδικτυακής εφαρμογής. Εάν πάμε απλά να πειράξουμε τα αρχεία html τότε ενδεχομένως οι αλλαγές να μη γίνουν ορατές διότι πιθανώς να μην τροποποιησαμε με το σωστό αρχείο. Ενδεχομένως να τροποποιήσουμε μεν το σωστό αρχείο αλλά αυτό να διαβάζει δεδομένα τα οποία δεν τα γνωρίζουμε. Για να μπορέσουμε να κάνουμε αλλαγές στον κώδικα html και στο css θα πρέπει να έχουμε ολόκληρη την εικόνα της αρχιτεκτονικής MVC στο μυαλό μας.

Πώς να βρούμε το σωστό αρχείο στο e-shop

Ας υποθέσουμε ότι θέλουμε να κάνουμε μία αλλαγή στο ηλεκτρονικό μας κατάστημα. Εδώ μπαίνει το ερώτημα πώς θα βρούμε τη θέση του αρχείου το οποίο πρέπει να τροποποιήσουμε. Η απάντηση έρχεται από την παραπάνω διαδικασία και από την αρχιτεκτονική MVC. Θα πρέπει να κοιτάξουμε τη διεύθυνση url. Από εκεί θα καταλάβουμε ποιος φάκελος και ποιό αρχείο χειρίζεται τη διαδικασία.

Παράδειγμα εύρεσης του σωστού αρχείου php

Στο συγκεκριμένο παράδειγμα θέλουμε να κάνουμε αλλαγές στη σελίδα της κατηγορίας. Ψάχνουμε να βρούμε ποιο είναι το αρχείο στο οποίο θα κάνουμε τις αλλαγές στον κώδικα html. Για να το βρούμε θα κοιτάξουμε τη διεύθυνση url. Η αντιστοίχηση φαίνεται στην ακόλουθη εικόνα. Κοιτάμε τη διεύθυνση url και βλέπουμε οτι μετά από το "?route=" ακολοθουθεί η λέξη "product". Αυτό μας λέει να ανοίξουμε το φάκελο "product" κάτω από το φάκελο "controller". Η διπλανή λέξη είναι "category". Αυτό μας λέει οτι οι αλλαγές θα γίνουν στο αρχείο "category.php" κάτω από το φάκελο "product" (ο οποίςο βρίσκεται κάτω από το φάκελο "controller").

εφαρμογή του mvc σε opencart eshop

Η γλώσσα html

Αφού εντοπίσουμε το κατάλληλο αρχείο, στη συνέχεια μπορούμε να κάνουμε τις αλλαγές χρησιμοποιώντας τη γλώσσα html. Είναι σημαντικό να γνωρίζουμε ότι στον controller δεν κάνουμε μορφοποίηση html. Αυτά γίνονται μόνο στο view το οποίο είναι υπεύθυνο για την παρουσίαση των δεδομένων στο χρήστη. Πηγαίνουμε στο αρχείο php εντοπίζουμε τα κομμάτια του html που θέλουμε να πειράξουμε. Στη συνέχεια κάνουμε τις κατάλληλες τροποποιήσεις με τη γλώσσα html. Καλό θα είναι πριν ξεκινήσουμε τις αλλαγές να κάνουμε ένα backup σε όλο το ηλεκτρονικό κατάστημα.

Με το μυαλό στην προώθηση της ιστοσελίδας και το seo

Καλό θα είναι να θυμόμαστε κάποιες βασικές αρχές της προώθησης ιστοσελίδων Όταν κάνουν αλλαγές στο ηλεκτρονικό μας κατάστημα. Η σημαντικότερη συμβουλή από την οπτική γωνία της προώθησης της ιστοσελίδας είναι η εξής. Πριν τροποποιήσουμε ένα αρχείο καλό θα είναι να κρατήσουμε αντίγραφο του στον τοπικό δίσκο πριν γίνουν οι αλλαγές. Διότι όσο το ηλεκτρονικό κατάστημα μένει εκτός λειτουργίας τόσο η Google το υποβιβάζει στα αποτελέσματα της κατάταξης αποτελεσμάτων της μηχανής αναζήτησης.

Για παράδειγμα εάν θέλουμε να αλλάξουμε το αρχείο της κατηγορίας στο παραπάνω παράδειγμα καλό θα είναι να διατηρήσουμε το πρωτότυπο αρχείο κάπου στον τοπικό μας δίσκο. Όσο και να εμπιστευόμαστε τις γνώσεις μας το html και το php πάντα υπάρχει περίπτωση που θα κάνουμε ένα λάθος το οποίο να μην μπορούμε να το διορθώσουμε. Σε αυτή την περίπτωση θα χρειαστούμε να κάνουμε μία μικρή αναζήτηση στο διαδίκτυο ή να ζητήσουμε βοήθεια από κάποιον φίλο που έχει μεγαλύτερη εμπειρία από εμάς. Θα είναι πολύ αρνητικό για την προώθηση της ιστοσελίδας κάποια κομμάτια του e-shop να μη λειτουργούν σωστά. Επίσης είναι σημαντικό να γνωρίζουμε ότι κάποια αρχεία επηρεάζουν ολόκληρο το ηλεκτρονικό κατάστημα, όπως για παράδειγμα τα αρχεία header και footer. Ένα λάθος σε αυτα τα αρχεία θα αφήσει εκτός λειτουργίας ολόκληρο το e-shop. Δύο μέρες με error 500 αρκούν για να πάει χαμένη η δουλειά που κάναμε για την προώθηση της ιστοσελίδας ολοκλήρο το μήνα.

Σεμινάριο κατασκευής eshop

Η αρχιτεκτονική MVC συνήθως δεν διδάσκεται στα σεμινάρια κατασκευής e-shop. Όταν ξεκινάμε να κάνουμε ένα μάθημα δημιουργίας ηλεκτρονικού καταστήματος συνήθως αναφέρουμε πώς δημιουργούμε κατηγορίες, πώς τοποθετούμε προϊόντα, πώς αλλάζουμε τα προϊόντα, πώς βάζουμε φίλτρα και άλλα τέτοια απλά πράγματα. Ο λόγος που δεν διδάσκεται η αρχιτεκτονική MVC στα σεμινάρια e-shop είναι διότι περιλαμβάνει κώδικα. Οι περισσότεροι άνθρωποι μόλις ακούσουν οτι θα μιλήσουμε για κώδικα τρομάζουν και θεωρούν οτι είναι δύσκολο. Δημιουργήσαμε αυτή τη σελίδα για να διευκολύνουμε όσους θέλουν να αποκτήσουν τον απόλυτο έλεγχο πάνω στο ηλεκτρονικό τους κατάστημα. Βεβαίως αυτό δεν είναι εύκολο και απαιτεί αρκετό κόπο και αρκετό ψάξιμο. Όμως είναι η αρχή ενός δρόμου που θα σας οδηγήσει σε ολοκληρωμένο έλεγχο του e-shop. Όταν γνωρίζετε την αρχιτεκτονική MVC τότε μπορείτε να κάνετε τίποτα θέλει έρχεται πάνω στο opencart. Αυτό το κομμάτι θα μπορούσαμε να το ονομάσουμε ως προηγμένο σεμινάριο eshop.

Εκπαίδευση ενηλίκων στην πληροφορική. Πως να επιλέξετε σεμινάρια μαθήματα ή σεμινάρια σε θεματικές ενότητες πληροφορικής.