Επικοινωνία Ανθρώπου Μηχανής Εαρινό Εξάμηνο 2007 Web Interfaces Εργαλεία παραγωγής κώδικα συμβατού με ASP Γαλούσης Θεόδωρος Α.Μ 630 Δρομπίλας Δημήτριος.

Παρουσίαση με θέμα: "Επικοινωνία Ανθρώπου Μηχανής Εαρινό Εξάμηνο 2007 Web Interfaces Εργαλεία παραγωγής κώδικα συμβατού με ASP Γαλούσης Θεόδωρος Α.Μ 630 Δρομπίλας Δημήτριος."— Μεταγράφημα παρουσίασης:

1 Επικοινωνία Ανθρώπου Μηχανής Εαρινό Εξάμηνο 2007 Web Interfaces Εργαλεία παραγωγής κώδικα συμβατού με ASP Γαλούσης Θεόδωρος Α.Μ 630 Δρομπίλας Δημήτριος Α.Μ 642

2 Εισαγωγή Τι είναι η ASP.ΝΕΤ Χειρισμός του εργαλείου Visual Web Developer Studio

3 Η ASP.NET είναι μια συναρπαστική τεχνολογία προγραμματισμού Ιστού που καινοτομεί από τη Microsoft και επιτρέπει στους developers τη δημιουργία δυναμικών ιστοσελίδων. Δυναμικές ιστοσελίδες είναι σελίδες των οποίων το περιεχόμενο παράγεται δυναμικά όποτε η ιστοσελίδα ζητείται. Τι είναι η ASP.ΝΕΤ

4 Τι Είναι ένα Αρχείο ASP. •Ένα αρχείο ASP είναι ακριβώς το ίδιο όπως ένα αρχείο HTML. •Ένα αρχείο ASP μπορεί να περιέχει κείμενο, HTML tags και scripts (VBscript, C#). •Τα scripts σ’ ένα αρχείο ASP εκτελούνται στον server. •Ένα αρχείο ASP έχει την επέκταση.asp.

5 Πώς Δουλεύει ένα Αρχείο ASP •Όταν ένας φυλλομετρητής ζητάει ένα αρχείο HTML, ο server επιστρέφει το αρχείο. •Όταν ένας φυλλομετρητής ζητάει ένα αρχείο ASP, ο server καλεί τον μηχανισμό της ASP. •Ο μηχανισμός της ASP διαβάζει το αρχείο ASP και εκτελεί τα scripts που περιέχει. •Τέλος, το αρχείο ASP επιστρέφεται στον φυλλομετρητή σαν ένα απλό αρχείο HTML.

6 Πώς Δουλεύει ένα Αρχείο ASP

7 Τι Μπορεί να Κάνει η ASP για μας •Να τροποποιήσει δυναμικά το περιεχόμενο μιας ιστοσελίδας. •Να απαντά σε ερωτήσεις χρήστη ή σε δεδομένα που υποβάλλονται από φόρμες HTML. •Να έχει πρόσβαση σε δεδομένα ή σε βάσεις δεδομένων και να επιστρέφει τα αποτελέσματα σ’ έναν φυλλομετρητή. •Να προσαρμόζει μια ιστοσελίδα ώστε να την κάνει πιο χρήσιμη στους χρήστες.

8 •Παρέχει ασφάλεια εφόσον ο ASP κώδικάς μας δεν μπορεί να φανεί στον φυλλομετρητή. •Εφόσον τα αρχεία ASP επιστρέφονται σαν απλή HTML, μπορούν να προβληθούν από οποιονδήποτε φυλλομετρητή. Τι Μπορεί να Κάνει η ASP για μας

9 Σύνταξη της ASP Δεν μπορούμε να δούμε τον ASP κώδικα σ’ έναν φυλλομετρητή, αλλά μόνο την έξοδο από την ASP, που είναι απλή HTML. Και αυτό γιατί τα scripts εκτελούνται στον server πριν σταλεί το αποτέλεσμα στον φυλλομετρητή. Ενα αρχείο ASP περιέχει κανονικά HTML tags, όπως ένα κανονικό αρχείο HTML. Επιπλέον, ένα αρχείο ASP μπορεί να περιέχει server scripts, που περικλείονται από τους οριοθέτες (delimiters). Τα server scripts εκτελούνται στον server και μπορούν να περιέχουν οποιεσδήποτε εκφράσεις, εντολές, διαδικασίες ή τελεστές που είναι έγκυροι για τη γλώσσα συγγραφής που χρησιμοποιούμε.

10 Ένα απλό παράδειγμα μετατροπής κώδικα ASP σε HTML ASP Code Untitled Page <asp:TextBox ID="TextBox1" runat="server" Height="44px" Style="z-index: 100; left: 42px; position: absolute; top: 45px" Width="334px" ReadOnly="True">Hello World!!!!

11 Ένα απλό παράδειγμα μετατροπής κώδικα ASP σε HTML HTML Code Untitled Page

12 Τρόποι ανταλλαγής δεδομένων Υπάρχουν δυο τρόποι ανταλλαγής των δεδομένων που εισάγει ο χρήστης προς τον server. Ο πρώτος τρόπος είναι με τη μέθοδο GET με την οποία τα δεδομένα που εισήγαγε ο χρήστης στέλνονται με τη μορφή συμβολοσειράς ερώτησης μέσω της URL της ιστοσελίδας. http://localhost:11657/WebSite5/Default2.aspx http://localhost:11657/WebSite5/Default2.aspx?height=55&weight=150 Ο δεύτερος τρόπος είναι με τη μέθοδο POST με την οποία τα δεδομένα που εισήγαγε ο χρήστης στέλνονται μαζί με τις Post HTTP κεφαλίδες χωρίς να φαίνονται στο URL. http://localhost:11657/WebSite5/Default2.aspx

13 Το εργαλείο Visual Web Developer Studio Το εργαλείο Visual Web Developer Studio είναι ένα προϊόν της Microsoft που διατίθεται δωρεάν από τη σελίδα www.asp.net για την ανάπτυξη δυναμικών ιστοσελίδων βασισμένο σε κώδικα ASP, παρέχοντας στο χρήστη κάποιες αυτοματοποιημένες διαδικασίες δημιουργίας ASP ιστοσελίδων. www.asp.net

14 Το Visual Web Developer Studio υποστηρίζει HTML, CSS, JavaScript, XML, RSS, και Web Services. Παρέχει επίσης τα εργαλεία για τη διαδικασία διόρθωσης, και τη διαδικασία ανάπτυξης. Μπορείτε πλήρως να προσαρμόσετε το περιβάλλον ανάπτυξης IDE για τις προτιμήσεις και τις ανάγκες σας. Το εργαλείο Visual Web Developer Studio

15

16

17 Με το Visual Web Developer Studio έχουμε τη δυνατότητα να δημιουργήσουμε δυναμικές ιστοσελίδες με δύο τρόπους, αλλά και με το συνδυασμό τους. Α) Source view Με απευθείας εγγραφή και τροποποίηση κώδικα Β) Design view (WYSIWYG Editor) Με αυτοματοποιημένες λειτουργίες τύπου Drag and Drop πάνω σε ένα σχεδιαστικό καμβά

18 Untitled Page Το εργαλείο Visual Web Developer Studio Για να δημιουργήσουμε ένα νέο ιστόχωρο ASP.NET επιλέγουμε File -> New Web Site -> ASP.NET Web Site Για να δημιουργήσουμε μία νέα ιστόσελίδα ASP.NET επιλέγουμε File -> New file -> Web form Αυτό είναι το αποτέλεσμα μιας νεοδημιουργημένης ιστοσελίδας ASP.NET

19 Το εργαλείο Visual Web Developer Studio Στην κάτω δεξιά μεριά του Visual Web Developer Studio διακρίνουμε το παράθυρο Properties στο οποίο εμφανίζονται οι ιδιότητες του ενεργού αντικειμένου.

20 Το εργαλείο Visual Web Developer Studio Σχεδόν για όλα τα στοιχεία ελέγχου που περιέχουν κείμενο, περίγραμμα, φόντο, επιλογή μεγέθους κλπ. στο παράθυρο Properties κάτω δεξιά, υπάρχουν ανάλογα το στοιχείο ελέγχου οι εξής επιλογές. Bold Italic Name Names Overline Size Strikeout Underline NotSet None Dotted Dashed Solid Double Groove Ridge Inset Outset BackColor BorderColor BorderStyle BorderWidth Font ForeColor

21 Το εργαλείο Visual Web Developer Studio Οπουδήποτε χρειάζεται να επιλέξουμε χρώμα π.χ. για γραμματοσειρά, φόντο, περιγράμματα κλπ. μας δίνονται οι παρακάτω χρωματικές παλέτες.

22 Το εργαλείο Visual Web Developer Studio

23 Στην πάνω δεξιά μεριά του Visual Web Developer Studio διακρίνουμε το παράθυρο Solution Explorer στο οποίο απεικονίζεται το δέντρο των αρχείων της ιστοσελίδας μας. Στην ίδια θέση εμφανίζεται και ο Database Explorer στον οποίο απεικονίζονται τα στοιχεία της Βάσης Δεδομένων μας, αν υπάρχει.

24 Το εργαλείο Visual Web Developer Studio Στην αριστερή μεριά του Visual Web Developer Studio διακρίνουμε το Toolbox το οποίο είναι ένα παράθυρο το οποίο περιέχει στοιχεία ελέγχου που εισάγουμε στην ιστοσελίδα μας με τη λειτουργία Drag and Drop όταν δουλεύουμε στο Design View.

25 Στην κατηγορία Standard περιέχονται τα βασικά και πιο συχνά χρησιμοποιούμενα στοιχεία για τη δημιουργία της ιστοσελίδας μας.

26 Το εργαλείο Visual Web Developer Studio Επιλογή ενός κατάλληλου στοιχείου ελέγχου με βάση τα δεδομένα που συλλέγονται Είδος εισαγόμενης πληροφορίαςΠεριγραφή Κατάλληλο στοιχείο ελέγχου Ναι/ΌχιΟ χρήστης μπορεί να επιλέξει μόνο μία από δύο πιθανές τιμές. DropDownList, CheckBox, ή δύο RadioButtons Μια επιλογή από μία λίστα αποδεκτών απαντήσεων Ο χρήστης πρέπει να κάνει μια επιλογή από μια λίστα πεπερασμένων αποδεκτών επιλογών DropDownList ή μια σειρά από RadioButtons Γενικό κείμενοΟ χρήστης μπορεί να εισάγει κείμενο σε οποιαδήποτε μορφή. TextBox

27 Το εργαλείο Visual Web Developer Studio

28

29

30

31 Στην κατηγορία Data περιέχονται τα στοιχεία ελέγχου για την διαχείριση και την εμφάνιση των στοιχείων μιας Βάσης Δεδομένων.

32 Στην κατηγορία Validation περιέχονται τα στοιχεία ελέγχου για την επικύρωση της ορθότητας των δεδομένων που εισάγονται από το χρήστη κατά την αλληλεπίδρασή του με τη σελίδα.

33 Το εργαλείο Visual Web Developer Studio

34 Στην κατηγορία Navigation περιέχονται τα στοιχεία ελέγχου για την εμφάνιση της διάρθρωσης της ιστοσελίδας.

35 Το εργαλείο Visual Web Developer Studio

36 Στην κατηγορία Login περιέχονται τα στοιχεία ελέγχου που απαιτούνται για τη δημιουργία ενός νέου χρήστη ή μιας σύνδεσης στην ιστοσελίδα.

37 Το εργαλείο Visual Web Developer Studio

38 Το Visual Web Developer Studio μας παρέχει ένα πολύ χρηστικό οδηγό για την διαχείριση των λογαριασμών των χρηστών της ιστοσελίδας.

39 Το εργαλείο Visual Web Developer Studio Μέσω αυτού του οδηγού μπορούμε να εισάγουμε ή να διαγράψουμε χρήστες ή και να τροποποιήσουμε τα στοιχεία τους.

40 Επίσης μπορούμε να ορίσουμε και να τροποποιήσουμε τους κανόνες πρόσβασης των φακέλων της ιστοσελίδας για κάθε χρήστη. Το εργαλείο Visual Web Developer Studio

41 Επίσης μας παρέχεται ένα εργαλείο μέσω του οποίου να μπορεί ο χρήστης να δημιουργεί ένα νέο λογαριασμό.

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

43 Στην κατηγορία HTML περιέχονται τα στοιχεία ελέγχου για την εισαγωγή απλών στατικών στοιχείων HTML

44 Το εργαλείο Visual Web Developer Studio Μας επιτρέπεται η δημιουργία σελίδων που ονομάζονται Master pages οι οποίες χρησιμοποιούνται ως προσχέδια για δημιουργία νέων ιστοσελίδων.

45 Το εργαλείο Visual Web Developer Studio Η δημιουργία τέτοιων Master pages μπορεί να γίνει είτε χειροκίνητα είτε επιλέγοντας από κάποιες έτοιμες φόρμες που μας παρέχει το εργαλείο και μετά διαμορφώνουμε τις στιλιστικές λεπτομέρειες των επιμέρους κομματιών.

46 Ο μηχανισμός της ASP.NET υποστηρίζει και αναφορά σφαλμάτων εάν υπάρχουν κατά την εμφάνιση της ιστοσελίδας στον φυλλομετρητή του χρήστη.

47