×
Κατασκευή Ιστοσελίδων WordPress Joomla wordpress vs html/css
×
Κατασκευή Eshop Woocommerce Opencart Magento Shopify
×
Προώθηση Ιστοσελίδων Digital Marketing Μαθήματα Facebook Σεμινάρια Linkedin Μαθήματα Instagram Σεμινάρια Twitter Μαθήματα Pinterest
×
Κατασκευή web εφαρμογών Σεμινάρια JAVA Μαθήματα PHP Σεμινάρια MySQL
×
Μαθήματα Excel Σεμινάρια VBA Σεμινάρια Photoshop Μαθήματα PowerPoint Σεμινάρια Word Μαθήματα Προγραμματισμού Πληροφορική στο δημοτικό

balatsoukas logo balatsoukas.com

Κατασκευή web εφαρμογών

Κατασκευή web εφαρμογών διαχείρισης βάσης δεδομένων. Παράδειγμα χρήσης php και myql για τη δημιουργία διαδικτυακής εφαρμογής. Κατασκευή custom web app.

Εκπαιδευτής Ενηλίκων Νικόλαος Μπαλατσούκας Τηλ. (+30) 6977676785

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

Γλώσσες προγραμματισμού για τη δημιουργία web εφαρμογών

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

Επίσης υπάρχουν πολλά frameworks που μπορούν να χρησιμοποιηθούν για την κατασκευή εφαρμογών διαχείρισης βάσης δεδομένων:

Στο παράδειγμά μας θα χρησιμοποιήσουμε τη γλώσσα προγραμματισμού php και τη βάση δεδομένων mysql.

Φιλοξενία web εφαρμογών

Το πρώτο βήμα για την κατασκευή web εφαρμογής είναι να αποκτήσουμε χώρο φιλοξενίας στον οποίο θα δημιουργήσουμε τη βάση δεδομένων και θα τοποθετήσουμε τα αρχεία. Το πρώτο βήμα είναι να κάνουμε κατοχύρωση του domain στο οποίο θα φιλοξενηθεί η διαδικτυακή εφαρμογή. Υπάρχουν πολλές εταιρείες μέσω των οποίων μπορούμε να κατοχυρώσουμε domain. Οι εταιρείες που κάνουν κατοχύρωση domain ονομάζονται καταχωρητές ονομάτων. Στη συνέχεια θα πρέπει να αγοράσουμε πακέτο φιλοξενίας. Όταν κάνουμε την αγορά του πακέτου φιλοξενίας τότε θα λάβουμε ένα email με τις τιμές των name servers. Στη συνέχεια μπορούμε να κάνουμε αλλαγή των name servers ώστε να δείχνουν στο πακέτο φιλοξενίας που αγοράσαμε. Τότε μπορούμε να ξεκινήσουμε την κατασκευή της web εφαρμογής. Υπάρχουν πολλές εταιρείες φιλοξενίας ιστοσελίδων τόσο στην Ελλάδα όσο και στο εξωτερικό.

Απαιτήσεις φιλοξενίας για τη δημιουργία διαδικτυακής εφαρμογής

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

Κατασκευή web εφαρμογών στο xampp

Εάν θέλετε να ξεκινήσετε την κατασκευή web εφαρμογής στον υπολογιστή σας και να τη μεταφέρετε αργότερα στο διαδίκτυο τότε μπορείτε να χρησιμοποιήσετε το xampp ή το wamp. Μια συνηθισμένη διαδικασία στην κατασκευή ιστοσελίδων είναι να κάνουμε την υλοποίηση τοπικά και όταν είμαστε έτοιμοι τότε να αγοράσουμε domain και hosting. Ένα πακέτο το οποίο χρησιμοποιείται για αυτό το σκοπό στη δημιουργία ιστοσελίδων και eshop είναι το xampp το οποίο περιλαμβάνει τα κατάλληλα λογισμικά ώστε η εφαρμογή να εκτελείται τοπικά όπως ακριβώς θα έκανε στο διαδίκτυο. Για τον ίδιο σκοπό χρησιμοποιείται επίσης το wamp. Εδώ μπορείτε να δείτε βήμα προς βήμα πως γίνεται η δημιουργία ιστοσελίδας στο xampp.

Προαπαιτούμενες γνώσεις για τον προγραμματισμό στο διαδίκτυο

Όλες οι γλώσσες προγραμματισμού που χρησιμοποιούνται στη δημιουργία διαδικτυακών εφαρμογών είναι άρρηκτα δεμένες με τη γλώσσα html η οποία χρησιμοποιείται για την παρουσίαση των δεδομένων. Αναγκαία προϋπόθεση για να μπορεί κάποιος να ασχοληθεί με την κατασκευή web εφαρμογής διαχείρισης βάσης δεδομένων είναι να γνωρίζει τη γλώσσα html. Εδώ μπορείτε να παρακολουθήσετε απλά μαθήματα html ώστε να θυμηθείτε τις βασικές εντολές της γλώσσας. Καλό είναι επίσης να γνωρίζετε τη γλώσσα css η οποία χρησιμοποιείται για τη μορφοποίηση των δεδομένων. Στην ιστοσελίδα μας έχουμε δημοσιεύσει μαθήματα css με τα οποία μπορείτε να γνωρίσετε πώς γίνονται οι βασικές μορφοποίησης στο διαδίκτυο. Εδώ βρίσκονται τα μαθήματα css. Τέλος καλό είναι να γνωρίζει τη γλώσσα JavaScript διότι χρησιμοποιείται για τον προγραμματισμό από τη μεριά του φυλλομετρητή. Η JavaScript είναι μία γλώσσα προγραμματισμού client-side. Αυτό σημαίνει ότι δεν εκτελείται στο server αλλά στο φυλλομετρητή του πελάτη. Εδώ μπορείτε να γνωρίσετε γλώσσα χρησιμοποιώντας μαθήματα JavaScript που έχουμε δημοσιεύσει. Για τη δημιουργία της εφαρμογής αναγκαίο είναι να γνωρίζει κάποιος προγραμματισμό. Στο παράδειγμά μας θα χρησιμοποιήσουμε php. Στην ιστοσελίδα μας έχουμε δημοσίευση κώδικα για τη γλώσσα php ο οποίος βρίσκεται στη σελίδα με τα μαθήματα php. Επίσης είναι αναγκαίο να γνωρίζει κάποιος τη γλώσσα sql. Το Α και το ω σε μία web εφαρμογή είναι η χρήση της γλώσσας για την αναζήτηση των δεδομένων. Στον ακόλουθο σύνδεσμο έχουμε δημοσιεύσει μαθήματα sql.

Δωρεάν φιλοξενία ιστοσελίδων

Οι περισσότερες Ελληνικές εταιρείες φιλοξενίας ιστοσελίδων προσφέρουν δωρεάν φιλοξενία ιστοσελίδων. Όμως τα δωρεάν πακέτα φιλοξενίας δεν προσφέρουν βάση δεδομένων. Υπάρχουν επίσης πολλές εταιρείες φιλοξενίας, στο εξωτερικό σύμφωνα με όσα γνωρίζουμε, οι οποίες παρέχουν δωρεάν φιλοξενία που συμπεριλαμβάνει βάση δεδομένων. Όμως σε αυτά τα πακέτα δωρεάν φιλοξενίας που περιλαμβάνουν βάση δεδομένων δεν μπορεί κάποιος να έχει το δικό του domain. Εάν θέλει να αποκτήσει domain θα πρέπει να καταβάλει κάποιο χρηματικό ποσό και το κόστος της φιλοξενίας. Για την κατασκευή web εφαρμογής είναι απαραίτητο να αποκτήσουμε πρόσβαση σε πακέτο φιλοξενίας το οποίο περιλαμβάνει βάση δεδομένων. Στο παράδειγμά μας για τη δημιουργία web εφαρμογής στα πλαίσια μαθήματος δεν χρειάζεται να κάνουμε αγορά πακέτο φιλοξενίας αλλά μας καλύπτουν επαρκώς τα δωρεάν πακέτα. Μπορείτε να επιλέξετε μία από τις ακόλουθες εταιρείες για να κάνετε δωρεάν φιλοξενία στη web εφαρμογή που θα δημιουργήσετε κατά τη διάρκεια των μαθημάτων:

Δημιουργία βάσης δεδομένων στο πακέτο φιλοξενίας

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

βάσεις δεδομένων και χρήστες

Σύνδεση βάσης δεδομένων με τη web εφαρμογή

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

σύνδεση database με web εφαρμογή

Σχεδίαση βάσης δεδομένων

Το πρώτο και σημαντικότερο βήμα για την κακασκευή web εφαρμογής είναι η σχεδίαση της βάσης δεδομένων. Μέχρι τώρα σε τεχνικό επίπεδο δημιουργήσαμε μία βάση δεδομένων και αποκτήσαμε πρόσβαση σε αυτήν. Όμως ακόμα δεν έχουμε αποφασίσει και το περιεχόμενο της βάσης δεδομένων. Αυτό ακριβώς θα κάνουμε τώρα. Πρώτα θα πρέπει να αποφασίσουμε πόσους και ποιους πίνακες θα έχει βάση δεδομένων. Στη συνέχεια θα πρέπει να αποφασίσουμε με ποιον τρόπο συνδέονται οι πίνακες μεταξύ τους. Μέχρι να λάβουμε τελική απόφαση για αυτά τα ερωτήματα η βάση δεδομένων παραμένει σχεδιασμένες στο χαρτί και όχι στον υπολογιστή η στο server. Όταν αποφασίσουμε ότι έχουμε καταλήξει την τελική σχεδίαση των πινάκων και τον τρόπο που συνδέονται μεταξύ τους τότε μπορούμε να προχωρήσουμε στη δημιουργία της βάσης δεδομένων με τις κατάλληλες εντολές sql.

Παράδειγμα σχεδίασης βάσης δεδομένων

Στο παράδειγμά μας θα δημιουργήσουμε μία απλή βάση δεδομένων η οποία περιλαμβάνει τηλέφωνα και e-mail. Δηλαδή θα φτιάξουμε έναν διαδικτυακό τηλεφωνικό κατάλογο. Για κάθε εγγραφή που τοποθετούμε στον κατάλογο θέλουμε να καταγράφουμε το γεωγραφικό διαμέρισμα στο οποίο διαμένει. Συνεπώς θα πρέπει να δημιουργήσουμε μία βάση δεδομένων με δύο πίνακες και σύνδεση μεταξύ τους:

Εντολές sql create

Στη συνέχεια θα πρέπει να δημιουργήσουμε τις κατάλληλες εντολές sql για τη δημιουργία των δύο πινάκων και τη σύνδεση μεταξύ τους. Θα χρησιμοποιήσουμε τις εντολές create της γλώσσας sql:

create sql

Στην ακόλουθη εικόνα βλέπουμε σε γραφικό περιβάλλον τους πίνακες καθώς και την ένωση μεταξύ τους:

ένωση πινάκων sql

Στον ακόλουθο σύνδεσμο μπορείτε να κάνετε λήψη του αρχείου sql ώστε να το κάνετε import στη δική σας εφαρμογή:

sql_create.zip

Δημιουργία των αρχείων της web εφαρμογής

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

Μπορείτε να χρησιμοποιήσετε οποιαδήποτε γλώσσα προγραμματισμού για τη δημιουργία των αρχείων της web εφαρμογής. Αναγκαία προϋπόθεση βεβαίως είναι να μπορεί η συγκεκριμένη γλώσσα προγραμματισμού που θα επιλέξετε να εκτελεστεί στο πακέτο φιλοξενίας πού χρησιμοποιείτε. Στο παράδειγμά μας θα χρησιμοποιήσουμε τη γλώσσα php για να δείξουμε με ποιο τρόπο μπορούμε να κάνουμε διαχείριση των εγγραφών του πίνακα γεωγραφικών περιοχών.

Αρχεία php για την παρουσίαση εγγραφών

Η πιο συνηθισμένη ενέργεια κατά την κατασκευή μιας web εφαρμογής αλλά και κατά τη χρήση μιας βάσης δεδομένων είναι η παρουσίαση των εγγράφων. Για την παρουσίαση των εγγράφων της βάσης δεδομένων χρησιμοποιούμε ένα αρχείο της γλώσσας προγραμματισμού το οποίο εκτελεί ερώτημα sql και παρουσιάζει τα δεδομένα μέσα της γλώσσας html.

Ξεκινάμε με παράδειγμα το οποίο παρουσιάζει τα δεδομένα του πίνακα γεωγραφικών περιοχών:
SELECT * FROM `diamerisma`

sql query 1

Συνεχίζουμε με παράδειγμα το οποίο παρουσιάζει τα ονόματα των εγγραφών του πίνακα επαφών:
SELECT name FROM `epafes`;

sql query 2

Συνεχίζουμε με παράδειγμα το οποίο παρουσιάζει e-mail και τηλέφωνα των εγγραφών του πίνακα επαφών:
SELECT epafes.name AS person_name, epafes.telephone, diamerisma.name AS diamerisma_name
FROM epafes JOIN diamerisma ON epafes.diamerisma_id = diamerisma.id

sql query 3

Δημιουργία αρχείου header της web εφαρμογής

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

Όλα τα αρχεία της εφαρμογής συνδέονται με το αρχείο χεντερ μέσω της εντολής include:

Ακολουθεί ο κώδικας του αρχείου header:

αρχείο header

Λήψη των αρχείων της διαδικτυακής εφαρμογής

Μέχρι τώρα έχουμε δημιουργήσει τα ακόλουθα αρχεία:

Στον ακόλουθο σύνδεσμο περιλαμβάνονται όλα τα αρχεία της εφαρμογής:

public_html.zip

Και εδώ έχουμε παραδείγματα κανονικοποίησης βάσης δεδομένων:

sql_normalization_examples.zip

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

  1. Δωρεάν database hosting για τη δημιουργία web εφαρμογής
  2. Δημιουργία βάσης δεδομένων στο hosting
  3. Import database στο phpMyAdmin
  4. Εντολή sql create για τη δημιουργία πίνακα
  5. Εντολές sql select
  6. Αρχείο php για τη σύνδεση με βάση δεδομένων
  7. Αρχείο php για την παρουσίαση εγγραφών βάσης δεδομένων
  8. Δημιουργία header σε web εφαρμογή

Δημιουργία eshop

Παρόμοιες τεχνικές χρησιμοποιούνται κατά τη δημιουργία e-shop. Απλά η διαφορά είναι ότι τα πακέτα κατασκευής eshop περιλαμβάνουν διαδικασία εγκατάστασης η οποία κάνει αυτόματα τη δημιουργία βάσης δεδομένων και την παραμετροποίηση των αρχείων της γλώσσας προγραμματισμού. Όλες οι πλατφόρμες που χρησιμοποιούνται στη δημιουργία e-shop περιλαμβάνουν δημιουργία βάσης δεδομένων στην οποία αποθηκεύονται τα προϊόντα και τα στοιχεία πελατών.

Δημοφιλείς πλατφόρμες κατασκευής e-shop

Για την κατασκευή e-shop χρησιμοποιούνται εξειδικευμένες πλατφόρμες οποίας είναι συστήματα content management system και με αυτόματο τρόπο κάνουν τη δημιουργία του ηλεκτρονικού καταστήματος. Οι πιο δημοφιλείς πλατφόρμες κατασκευής e-shop είναι το magento, το opencart και το woocommerce. Η συντριπτική πλειοψηφία των ηλεκτρονικών καταστημάτων κατασκευάζεται με το woocommerce. Με την πλατφόρμα του woocommerce μπορείτε να κατασκευάσετε ηλεκτρονικό κατάστημα εύκολα και γρήγορα. Εδώ μπορείτε να ενημερωθείτε για την κατασκευή e-shop με το woocommerce. Την πιο απλή βάση δεδομένων τη διαθέτει το Opencart. Εάν επιλέξετε την πλατφόρμα του opencart για τη δημιουργία e-shop τότε πολλές διαδικασίες μπορείτε να τις κάνετε απευθείας μέσω της βάσης δεδομένων. Η πιο ισχυρή πλατφόρμα κατασκευής eshop είναι το Magento. Όμως εάν επιλέξετε να κάνετε κατασκευή e-shop με το Magento τότε ανεβαίνει κατακόρυφα τόσο το κόστος όσο και η δυσκολία.

Εδώ υπάρχει ένα αρχείο με παραδείγματα χρήσης της γλώσσας javascript στην κατασκευή παιχνιδιών

Εδώ έχουμε προσθέσει ακόμα περισσότερα παραδείγματα για τη χρήση της γλώσσας javascript στην κατασκευή web εφαρμογών