Αυτό είναι ένα άρθρο χορηγίας και έγινε δυνατή από τον Wix. Το πραγματικό περιεχόμενο και οι απόψεις είναι οι μοναδικές απόψεις του συγγραφέα που διατηρεί την συντακτική ανεξαρτησία, ακόμη και όταν χορηγείται μια θέση.

Όταν πρόκειται για τη δημιουργία μιας ιστοσελίδας, εάν είστε προγραμματιστής, μπορείτε να χρησιμοποιήσετε την προσέγγιση DIY και να κωδικοποιήσετε και να φιλοξενήσετε τα πάντα στον εαυτό σας. Αν είστε τελικός χρήστης / καταναλωτής, όπως ακριβώς οι περισσότεροι από εμάς, μπορείτε να χρησιμοποιήσετε ένα λογισμικό οικοδόμου ιστού για να δημιουργήσετε όμορφους ιστότοπους με απλά κλικ.

Wix ανήκει στο τελευταίο, δεδομένου ότι είναι ένας οικοδόμος web που σας επιτρέπει να δημιουργήσετε δωρεάν όμορφες ιστοσελίδες με μερικά μόνο κλικ του ποντικιού. Αλλά με την εισαγωγή του κώδικα Wix, έχει θολώσει τις γραμμές ανάμεσα στο να το κάνετε μόνοι σας και χρησιμοποιώντας έναν οικοδόμο web. Τώρα μπορείτε να κάνετε και τα δύο.

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

Ο κώδικας Wix προσθέτει τέτοια πράγματα στα υπάρχοντα εργαλεία δημιουργίας ιστού χωρίς την επιπλοκή. Προσφέρει διάφορα πρότυπα για να δημιουργήσετε και να διαχειριστείτε τις βάσεις δεδομένων σας, τις φόρμες και επίσης σας επιτρέπει να προσθέσετε κώδικα javascript στον ιστότοπό σας. Το καλύτερο από όλα είναι ότι μπορείτε να χρησιμοποιήσετε τη δυνατότητα δυναμικών σελίδων για να γεμίσετε γρήγορα το περιεχόμενο από τη βάση δεδομένων, κάνοντάς το περισσότερο σαν ένα σύστημα διαχείρισης περιεχομένου και όχι ως οικοδόμος ιστοτόπου.

Στο παρακάτω παράδειγμα θα δημιουργήσουμε ένα απλό blog Make Tech Easier και θα προσθέσουμε δυναμικά χαρακτηριστικά σε αυτόν από τον κώδικα Wix.

Δημιουργία νέου ιστότοπου με τη Wix

Υποθέτοντας ότι είστε νέος στο Wix, μπορείτε να ξεκινήσετε με την εγγραφή σας για λογαριασμό με τη Wix. Αφού δημιουργήσετε έναν λογαριασμό, θα σας ζητηθεί να δημιουργήσετε τον ιστότοπό σας.

Στη συνέχεια θα σας ζητήσει να επιλέξετε τον τύπο ιστότοπου που θέλετε να δημιουργήσετε. Δεδομένου ότι αντιγράφω ένα blog Make Tech Easier, επέλεξα την επιλογή "Blog".

Η επόμενη οθόνη θα σας ρωτήσει πώς θέλετε να δημιουργήσετε τον ιστότοπό σας.

Το Wix ADI χρησιμοποιεί την τεχνητή νοημοσύνη για να δημιουργήσει αυτόματα έναν ιστότοπο για εσάς. Εάν προτιμάτε να μεταβείτε με μη αυτόματο τρόπο, επιλέξτε τη μέθοδο επεξεργασίας Wix. (Για να αποκτήσετε πρόσβαση στον κώδικα Wix, πρέπει να χρησιμοποιήσετε τον τελευταίο. Εάν έχετε επιλέξει Wix ADI, μπορείτε να μεταβείτε αργότερα στη λειτουργία Editor.)

Για αυτό το παράδειγμα χρησιμοποίησα τον επεξεργαστή Wix καθώς ήθελα να αποκτήσω τον πλήρη έλεγχο της εμφάνισης και της αίσθησης του site. Από εκεί μπορείτε να ξεκινήσετε με ένα πρότυπο. (Υπάρχουν χιλιάδες από αυτούς.)

Για να το κρατήσω απλό, ξεκίνησα με ένα κενό πρότυπο με κλασική διάταξη. Η παρακάτω εικόνα είναι αυτή που μοιάζει.

Πρόσβαση στον κώδικα Wix

Για να αποκτήσετε πρόσβαση στον κώδικα Wix, μεταβείτε στο "Εργαλεία" και επιλέξτε την επιλογή "Εργαλεία προγραμματιστή".

Θα δείτε τώρα μια νέα στήλη "Δομή τοποθεσίας". Από εκεί μπορείτε να έχετε πρόσβαση σε όλες τις λειτουργίες του κώδικα Wix.

Δημιουργία βάσεων δεδομένων για την αποθήκευση αναρτήσεων

Ένα από τα σπουδαία χαρακτηριστικά του Wix Code είναι η λειτουργία Database που σας επιτρέπει να δημιουργείτε βάσεις δεδομένων (aka Collection) και να αποθηκεύετε δεδομένα σε αυτό. Για ένα blog θα χρειαστεί να δημιουργήσουμε μια βάση δεδομένων για την αποθήκευση όλων των δημοσιεύσεών μας. Στην ενότητα Βάση δεδομένων, κάντε κλικ στην επιλογή "Προσθήκη νέας συλλογής". Δώστε στη συλλογή σας ένα όνομα και καθορίστε τον σκοπό της. Υπάρχουν διάφοροι τύποι βάσεων δεδομένων από τους οποίους μπορείτε να επιλέξετε, από το περιεχόμενο που δημιουργείται από το χρήστη, την υποβολή μελών, τα ιδιωτικά δεδομένα κλπ.

Μόλις δημιουργηθεί η συλλογή, μπορείτε να ξεκινήσετε να προσθέτετε πεδία και δεδομένα σε αυτήν.

Αυτό που δημιουργήσαμε είναι μια βάση δεδομένων Posts που περιέχει τον τίτλο, το περιεχόμενο, τη δημοσιευμένη ημερομηνία και διάφορες πτυχές μιας δημοσίευσης στο blog. Στη συνέχεια, πρέπει να συμπληρώσουμε το περιεχόμενο της βάσης δεδομένων στον κύριο ιστότοπο.

Δυναμικές σελίδες

Οι δυναμικές σελίδες μοιάζουν περισσότερο με μια σελίδα προτύπου όπου μπορείτε να δημιουργήσετε ένα σχέδιο και να το συνδέσετε στη βάση δεδομένων και θα συμπληρώσει αυτόματα όλα τα στοιχεία της βάσης δεδομένων σας στην πρώτη σελίδα με τις δικές τους διευθύνσεις URL. Για παράδειγμα, έχουμε έξι θέσεις στη βάση δεδομένων. Με μία μόνο δυναμική σελίδα, μπορούμε να την εμφανίσουμε για να εμφανιστούν όλες οι θέσεις στον κύριο ιστότοπο. Αυτό σας εξοικονομεί την προσπάθεια να δημιουργήσετε με μη αυτόματο τρόπο μια μόνο σελίδα για κάθε θέση. Υπάρχουν δύο κύριοι τύποι δυναμικών σελίδων στον κώδικα Wix - ένας είναι για την εμφάνιση ενός μόνο στοιχείου, ενώ ο άλλος για την κατηγορία (μια συλλογή παρόμοιων αντικειμένων σε μια λίστα).

Το παρακάτω δείχνει τον τρόπο δημιουργίας δυναμικών σελίδων και τη σύνδεσή τους με τον ιστότοπο.

1. Στην κυμαινόμενη γραμμή εργαλείων κάντε κλικ στο πρώτο εικονίδιο και επιλέξτε "Δυναμικές σελίδες". Κάντε κλικ στο κουμπί "Προσθήκη στο site".

2. Επιλέξτε "Σελίδα σελίδας" από το αναδυόμενο παράθυρο.

3. Στο URL επιλέξτε το πεδίο (στη βάση δεδομένων) που θέλετε να χρησιμοποιήσει για τη διεύθυνση URL. Σε αυτή την περίπτωση έβαλα τον τίτλο ως URL.

4. Στη συνέχεια, σχεδιάστε τη σελίδα και προσθέστε πεδία από τη βάση δεδομένων. Με κάθε στοιχείο που σύρετε στη σελίδα, μπορείτε να κάνετε κλικ στο κουμπί "Σύνδεση με δεδομένα" για να το συνδέσετε με το πεδίο από τη βάση δεδομένων. Για παράδειγμα, έσυρα ένα στοιχείο "Header 1" στη σελίδα και τη σύνδεσα με το πεδίο "Title" στη βάση δεδομένων Posts.

Και έκανα το ίδιο για την εμφανιζόμενη εικόνα, μετά το περιεχόμενο κ.λπ.

5. Αφού τελειώσετε με το σχέδιο, μπορείτε να κάνετε προεπισκόπηση και να δείτε πώς φαίνεται στο μπροστινό μέρος.

6. Το επόμενο βήμα είναι η σύνδεση της δυναμικής σελίδας από την Αρχική σελίδα. Τοποθετήστε την Αρχική σελίδα και προσθέστε ένα widget Repeater από την ενότητα "Λίστες και πλέγματα". Συνδέστε το γραφικό στοιχείο στη βάση δεδομένων των μηνυμάτων και συνδέστε κάθε στοιχείο στο γραφικό στοιχείο με τα πεδία στη βάση δεδομένων. Στην ενότητα "Σύνδεση συνδέει σε", μετακινηθείτε προς τα κάτω και επιλέξτε "Δημοσιεύσεις" στην ενότητα "Δυναμικές σελίδες".

Αυτό είναι.

Αυτό που μπορείτε να δείτε είναι ότι έχουμε δημιουργήσει μόνο μία δυναμική σελίδα και θα δημιουργήσει αυτόματα όλες τις σελίδες για κάθε στοιχείο στη βάση δεδομένων. Μπορείτε να κάνετε το ίδιο πράγμα για να προσθέσετε επίσης μια δυναμική σελίδα κατηγορίας.

Προσθήκη javascript σε σελίδες

Εάν είστε ένας καταλαβαίνω κωδικοποιητής javascript, μπορείτε να προσθέσετε javascript σε κάθε πρόσθετο χαρακτηριστικό σε κάθε σελίδα. Για παράδειγμα, αν έχετε προσθέσει μια φόρμα χρήστη στη σελίδα σας, μπορείτε να χρησιμοποιήσετε το javascript για να επικυρώσετε το πεδίο της φόρμας πριν από την υποβολή.

Σημείωση : Για να προσθέσετε κώδικα javascript σε μια σελίδα, μεταβείτε σε οποιαδήποτε σελίδα (ή στη σελίδα όπου θέλετε να εμφανίζεται ο κώδικας) και κάντε κλικ στο κουμπί "Κωδικός σελίδας" στο κάτω μέρος του κώδικα. Θα εμφανιστεί ένα παράθυρο και μπορείτε να προσθέσετε τον κωδικό σας εκεί.

1. Δημιουργήσαμε μια απλή φόρμα που θα συλλέγει το όνομα, το επώνυμο και τη διεύθυνση ηλεκτρονικού ταχυδρομείου από το χρήστη. Για αυτή τη φόρμα θέλουμε να επικυρώσουμε τη διεύθυνση ηλεκτρονικού ταχυδρομείου και να βεβαιωθούμε ότι το πεδίο "Επιβεβαίωση ηλεκτρονικού ταχυδρομείου" είναι το ίδιο με το πεδίο "Email".

2. Προσθέστε τον ακόλουθο κώδικα στην ενότητα "Κωδικός σελίδας":

 $ w.onReady (συνάρτηση () {const validateEmail = (otherEmailElementId) => (τιμή, απορρίπτουμε) => {else elseEmailElement = $ w (otherEmailElementId), if (value === otherEmailElement.value) {otherEmailElement.validity.valid = true; otherEmailElement.resetValidityIndication (); επιστροφή;} console.log ("Τα μηνύματα ηλεκτρονικού ταχυδρομείου και Επιβεβαίωση ηλεκτρονικού ταχυδρομείου δεν ταιριάζουν"), otherEmailElement.validity.valid = false; otherEmailElement.updateValidityIndication () ("# emailConfirmInput"), $ w ("# emailConfirmInput"), $ w ("# emailConfirmInput"), $ w (" w ('# dataset1') onBeforeSave (() => {let validationMessage = '', εάν (! $ w ('# emailInput' validationMessage + = 'Παρακαλώ εισάγετε μια διεύθυνση ηλεκτρονικού ταχυδρομείου \ n', αλλιώς αν ($ w ('# emailInput')) value! == $ w ("# emailConfirmInput") value) {validationMessage + = ' δεν αντιστοιχούν \ n ';} $ w (' # validationMessages ') AlidationMessage; $ w ('# validationMessages'). } else $ w ('# validationMessages') .comlapse (); }); });

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

Υπάρχει αφθονία που μπορείτε να κάνετε με Javascript. Δείτε τα παραδείγματα εδώ για περισσότερες πληροφορίες.

Εξωτερικά API

Αυτό είναι το μόνο βήμα όπου θα μπορούσε να γίνει πιο περίπλοκο. Ο κώδικας Wix ενσωματώνεται πλέον με εξωτερικό API, ώστε να μπορείτε εύκολα να συνδεθείτε με υπηρεσίες τρίτων όπως το Amazon, το Dropbox, το Google Drive, το Twitter, το IFTTT, το Zapier κλπ. Δεν θα πάω σε λεπτομέρειες εδώ, αλλά αν σας ενδιαφέρει, μπορούν να ελέγξουν την τεκμηρίωση API τους.

συμπέρασμα

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

Kudos στο Wix για τη δημιουργία ενός εύχρηστου εργαλείου που θα λύσει πολλά προβλήματα.

Δοκιμάστε τον κώδικα Wix και ενημερώστε μας τι σκέφτεστε.

Κωδικός Wix