Στα πλαίσια της πρώτης εργασίας θα υλοποιήσετε ένα διαδικτυακό τόπο που θα αποτελεί την ιστοσελίδα ενός ερευνητικού ινστιτούτου υγείας, βιολογίας, βιοπληροφορικής ή περιβάλλοντος. Καλείστε να δημιουργήσετε το λιγότερο 4 σελίδες εκ των οποίων:
• Η πρώτη να είναι η κεντρική (αρχική σελίδα, λογότυπο, τηλ. επικοινωνίας, διεύθυνση, κτλ.).
• Μία που θα αφορά στον κατάλογο παρεχόμενων υπηρεσιών (π.χ., δομή, ιστορία, οργανόγραμμα, τμήματα, κτλ.)
• Μία που θα απαριθμεί σε μορφή λίστα ή πίνακα με πληροφορίες (τον τρόπο προβολής εσείς θα τον επιλέξετε) ερευνητικά προγράμματα, υπηρεσίες ή δράσεις.
• Η τελευταία θα έχει μια πλήρη φόρμα για αποστολή στοιχείων για το κλείσιμο ραντεβού. Επιπρόσθετα, θα δημιουργήσετε 2 τουλάχιστον φύλλα στυλ. Ένα για άτομα χωρίς προβλήματα όρασης και ένα για άτομα τα οποία εξυπηρετούνται καλύτερα με μεγάλα γράμματα ή/και διαφορετική προβολής (π.χ., διαφορετικά χρώματα, μεγαλύτερες εικόνες, κτλ.). Μπορείτε να δείτε ένα παράδειγμα χρήσης εδώ.
Η παράδοση της εργασίας θα γίνει μέσω του open e-class. Όλα τα αρχεία (html, css, js, images, κτλ.) θα ενσωματωθούν σε ένα ενιαίο αρχείο .zip που θα ανεβάσετε πριν την καταληκτική ημερομηνία παράδοσης. H εργασία θα κριθεί τόσο για το γραφιστικό σχεδιασμό όσο και για τη λειτουργικότητά της για κάποιον που θέλει να πληροφορηθεί, περιηγηθεί και κλείσει ραντεβού. Είστε ελεύθεροι, συνεπώς να αυτοσχεδιάσετε για τη μορφή των σελίδων. Επιπλέον λειτουργικότητα αλλά και σωστή αλληλεπίδραση με το χρήστη θα ληφθεί θετικά υπ’όψην
Στα πλαίσια της δεύτερης εργασίας καλείστε να επεκτείνετε τον ιστότοπο που σχεδιάσατε στην πρώτη εργασίας σας με επιπλέον λειτουργικότητα και διασύνδεση με σύστημα διαχείρισης βάσεων δεδομένων phpMyAdmin. Στόχος είναι να αναπτυχθεί “back-end” λειτουργικότητα για τον διαχειριστή του ιστοτόπου. Συγκεκριμένα θα πρέπει να υλοποιήσετε κατ’ ελάχιστον τα παρακάτω: Φάση Α’ Δημιουργήστε μία νέα σελίδα .html, η οποία θα παρουσιάζει μια φόρμα εγγραφής νέου μέλους με τα ακόλουθα πεδία:
• Όνομα + Επώνυμο νέου μέλους (υποχρεωτικά, χωρίς αριθμούς και σύμβολα με εξαίρεση ένα κενό χαρακτήρα “space” ανάμεσα στο όνομα και το επώνυμο)
• Πατρώνυμο (χωρίς αριθμούς και σύμβολα, προαιρετικό)
• Ηλικία (>=18, υποχρεωτικό)
• Τηλ. (10 αριθμοί, προαιρετικό)
• Email (<= 64 χαρακτήρων, υποχρεωτικό)
• ΑΦΜ (9 αριθμοί, υποχρεωτικό)
• ΑΜΚΑ (11 αριθμοί, προαιρετικό)
• Αριθμός πιστωτικής κάρτας (16 ψηφία, υποχρεωτικό)
• Ημ/νία λήξης κάρτας (ΜΜ/ΗΗ/ΥΥ ή ΗΗ/ΜΜ/ΥΥ, >σήμερα, υποχρεωτικό)
• Διεύθυνση κατόχου κάρτας (αλφαριθμητικό, υποχρεωτικό)
• Σχόλια (αλφαριθμητικό, <= 250 χαρακτήρες, προαιρετικό)
• Κουμπί υποβολής και κουμπί καθαρισμού όλων των πεδίων
Κατά το πάτημα του κουμπιού “Send”, θα πρέπει να πραγματοποιούνται κατάλληλοι έλεγχοι με κώδικα JavaScript. Όσο πιο ρεαλιστικές αλλά και «φιλικές» προς τον χρήστη οι συμβουλές/έλεγχοι, τόσο καλύτερη θα είναι και η βαθμολογία της Φάσης Α’. Φάση Β’
Στα πλαίσια της συγκεκριμένης φάσης θα πρέπει να υλοποιήσετε μέσω PHP scripts μία εφαρμογή για τη διασύνδεση με ηλεκτρονική βάση δεδομένων (ΒΔ) των στοιχείων μελών του οργανισμού. Θα χρησιμοποιήσετε MySQL(i) για να αποθηκεύσετε τα δεδομένα των μελών. Συγκεκριμένα καλείστε να υλοποιήσετε την παρακάτω λειτουργικότητα:
-
Με την εισαγωγή στοιχείων στην φόρμα μέλους που σχεδιάστηκε κατά την Φάση Α’, θα εμφανίζεται σελίδα που θα ενημερώνει για την επιτυχή (ή μη) εισαγωγή των στοιχείων στη ΒΔ, καθώς και τα ακριβή στοιχεία που μπήκαν.
-
Μέσω νέας σελίδας, θα επιτρέπεται η επερώτηση των μελών που είναι ήδη αποθηκευμένα στη ΒΔ. Οι ερωτήσεις θα γίνονται ξανά μέσω φόρμας μόνο που ό,τι συμπληρώνει ο χρήστης στα αντίστοιχα πεδία θα χρησιμοποιούνται στην/στις αντίστοιχες SQL select ερωτήσεις. Θα πρέπει να επιτρέπεται η επιστροφή όλων των μελών με ερώτηση ως προς ΑΦΜ, ηλικία, ονοματεπώνυμο και σχόλια (με string matching τα τελευταία 2) καθώς και συνδυασμός αυτών.
-
Υλοποίηση ξεχωριστών κουμπιών για i) τη δυναμική δημιουργία της ΒΔ από την αρχή, καθώς και ii) δημιουργία των κατάλληλων πινάκων, ενώ με ξεχωριστό επίσης κουμπί θα δίνεται iii) η δυνατότητα διαγραφής όλων των στοιχείων της ΒΔ. Το σχήμα της ΒΔ που θα δημιουργήσετε στη MySQL (ονομάστε την RESDB και χρήστη root με κενό password), θα περιέχει πίνακα (ή πίνακες) της αρεσκείας σας, ώστε να μπορείτε να αποθηκεύσετε και να επερωτάτε τα στοιχεία των μελών του οργανισμού. Η εφαρμογή θα βαθμολογηθεί στο σύνολό της για το πόσο εύχρηστη και αποδοτική είναι σε όλες τις βαθμίδες τις υλοποίησης. Οδηγίες Υποβολής
• Υποβάλλετε ένα αρχείο ZIP ανά ομάδα στο Open eClass, πριν την καταληκτική ημερομηνία παράδοσης, με όλα σας τα .html, .js, .php αρχεία.
• Προσθέστε σχόλια ώστε να κάνετε κατανοητό τον τρόπο σκέψης σας όπου απαιτείται. Σχόλια μόνο στα αγγλικά ή με λατινικούς χαρακτήρες.
• Η εφαρμογή σας πρέπει να τρέχει σωστά αυτοτελώς (θα δοκιμαστεί στο XAMPP).
• Επιπλέον λειτουργικότητα αλλά και σωστή αλληλεπίδραση με τον χρήστη θα ληφθούν θετικά υπόψιν. Προσοχή! Ανάλογα με την προγραμματιστική επιλογή που θα κάνετε μεταξύ MySQL (υποστήριξη έως έκδοση <= PHP 5) ή MySQLi (υποστήριξη από έκδοση >=PHP 7), θα πρέπει να εγκαταστήσετε και την αντίστοιχη έκδοση XAMPP από τους συνδέσμους:
Mac OS: https://sourceforge.net/projects/xampp/files/XAMPP%20Mac%20OS%20X/ Windows: https://sourceforge.net/projects/xampp/files/XAMPP%20Windows/ Linux: https://sourceforge.net/projects/xampp/files/XAMPP%20Linux/ Προτείνεται η επιλογή της MySQLi.