Στο κεφάλαιο αυτό παρουσιάζεται ένα σύνολο εργαστηριακών ασκήσεων (εκφωνήσεις και οι υποδειγματικές λύσεις αυτών), με σκοπό την κατανόηση τεχνικών προγραμματισμού από την πλευρά του διακομιστή (server-side scripting). Η επιμέρους τεχνολογία που αξιοποιείται είναι η τεχνολογία ASP.NET (Active Server Pages), η οποία υποστηρίζεται από διακομιστές (web servers) της εταιρίας Microsoft (IIS, Internet Information Services). Στα παραδείγματα χρησιμοποιείται ως βασική γλώσσα προγραμματισμού στον Ιστό η γλώσσα C#, και συνδυάζεται η λειτουργικότητά της με στοιχεία προγραμματισμού από την πλευρά του πελάτη, με αποσπάσματα κώδικα JavaScript. Χρησιμοποιούνται επίσης αντικείμενα ADO.NET (ActiveX Data Objects) για τη σύνδεση και αλληλεπίδραση με βάσεις δεδομένων SQL.

Το κεφάλαιο 1 του παρόντος συγγράμματος, και επιπλέον θα είναι χρήσιμη κάποια προηγούμενη εμπειρία σε ζητήματα Προγραμματισμού Υπολογιστών και Βάσεων Δεδομένων.

1. Εισαγωγή

Στηριζόμενοι στα ενορατικά/οπτικά (visual) εργαλεία, στους προσφερόμενους μηχανισμούς διάδρασης, αλλά και γενικότερα στην προσφερόμενη ευχρηστία ενός ολοκληρωμένου περιβάλλοντος προγραμματισμού (όπως αυτό του Visual Studio), ακολουθούμε τη μέθοδο εκπαίδευσης από παράδειγμα (example-based learning) για να παρουσιάσουμε σημαντικές έννοιες και τεχνικές σχετικές με την ανάπτυξη εφαρμογών Ιστού και την υποστήριξη λειτουργιών ηλεκτρονικού εμπορίου, όπως: χρήση και επεξεργασία πρότυπων σελίδων (master pages), HTML tags και κανόνες μορφοποίησης CSS, δημιουργία μενού πλοήγησης, αντικειμενοστραφής και καθοδηγούμενος από συμβάντα προγραμματισμός για ανάπτυξη εφαρμογών στον Ιστό, φόρμες στον Ιστό και επικύρωση στοιχείων φόρμας, αξιοποίηση των application και session events, σύνδεση Iστότοπου με βάση δεδομένων και επεξεργασία στοιχείων βάσης δεδομένων μέσω Ιστοσελίδων, διαχείριση ζητημάτων ασφάλειας (δημιουργία ρόλων και χρηστών, εγγραφή χρηστών, αυθεντικοποίηση και έλεγχος πρόσβασης χρηστών), λειτουργία καλαθιού αγορών.

Να σημειώσουμε εδώ ότι η πολύ σημαντική πλευρά του προγραμματισμού στον Ιστό από την πλευρά του πελάτη (client-side scripting), με άξονα τις ισχυρές δυνατότητες της γλώσσας JavaScript, θα γίνει σε επόμενο κεφάλαιο που πραγματεύεται την ανάπτυξη περιεχομένου για κινητές συσκευές. Ό σημαντικότερος λόγος για την απόφασή μας αυτή, είναι η ευρεία χρήση πλέον της JavaScript για την ανάπτυξη εφαρμογών κινητού Ιστού (mobile Web), δυναμικών Ιστότοπων που γίνονται προσβάσιμοι από τους χρήστες κινητών συσκευών μέσω των φυλλομετρητών (browsers) τους.

2. Προγραμματισμός από την πλευρά του Διακομιστή - ASP.NET Τεχνολογία και Περιβάλλον Προγραμματισμού Visual Studio

2.1. Βασικοί μηχανισμοί διάδρασης (UI controls) ενός Ιστότοπου

Εκφώνηση:

Δημιουργήστε έναν Ιστότοπο με τρεις σελίδες, με μενού βασισμένο σε λέξεις-συνδέσμους που τις συνδέει (η παρακάτω εικόνα παρουσιάζει την αρχική του σελίδα). Στο κάτω μέρος της αρχικής σελίδας και της Page 2 παρέχεται η δυνατότητα να δώσει ο χρήστης το όνομά του και να λάβει απάντηση (μηχανισμοί label, textbox, button). Στις σελίδες Page1 και Page 2 να εμφανίζεται στο πάνω μέρος τους δυναμικά 'Καλημέρα!' ή 'Καλησπέρα!' (με script μέσα στον κώδικα της σελίδας)

Εικόνα 5.1 Βασική, αρχική Ιστοσελίδα

Δημιουργήστε έναν Ιστότοπο με τρεις σελίδες, με μενού βασισμένο σε λέξεις-συνδέσμους που τις συνδέει (η παραπάνω εικόνα παρουσιάζει την αρχική του σελίδα). Στο κάτω μέρος της αρχικής σελίδας και της Page 2 παρέχεται η δυνατότητα να δώσει ο χρήστης το όνομά του και να λάβει απάντηση (μηχανισμοί label, textbox, button). Στις σελίδες Page1 και Page 2 να εμφανίζεται στο πάνω μέρος τους δυναμικά 'Καλημέρα!' ή 'Καλησπέρα!' (με script μέσα στο κώδικα την σελίδας)

Υποδειγματική λύση:

· Δημιουργία καινούργιου Ιστότοπου (New Empty Web Site), Γλώσσα C#, όνομα: Lab1

· Εισαγωγή 3 web forms: Default.aspx, Page1.aspx, Page2.aspx

Στην Default.aspx:

Μέσα στο <div> (συνήθως υπάρχει ήδη, αλλιώς εισαγωγή <div> από το toolbox – HTML), εισάγουμε <h1> (από toolbar: Formatting), και βάζουμε ως κείμενο: “Αυτή είναι η αρχική μου σελίδα”
Εισαγωγή <p> (νέα παράγραφος)

Εισαγωγή (από καρτέλα source) ενός συνδέσμου <a> με κείμενο “Home”, και ενημέρωση της ιδιότητάς του href με την αντίστοιχη σελίδα default.aspx.

Εισαγωγή με άλλο τρόπο των συνδέσμων για τις σελίδες “Page1” και “Page2”: γράφουμε το κείμενο π.χ. Page1 και πατάμε από την μπάρα εργαλείων το εργαλείο ‘Convert to Hyperlink’

Εισαγωγή <hr /> (toolbar – HTML) (Horizontal Rule)

Εισαγωγή <br /> (αλλαγή γραμμής)

Εισαγωγή κειμένου (copy –paste) από Internet (έλεγχος μορφοποίησης)

Εισαγωγή 2 <br /> (ή 2 <p> με enter στο design)

Εισαγωγή “Enter your name:” και δίπλα …

Εισαγωγή Textbox (toolbox – Standard) και <br />

Εισαγωγή Button (toolbox – Standard) και Text=”Push Me” και <br />

Εισαγωγή Label (toolbox – Standard) και σβήσιμο του κειμένου «label» στην ιδιότητα text (για να μην είναι ορατό κάποιο κείμενο) και <br />

Εκτέλεση – δοκιμή - έλεγχος

Εισαγωγή click event στο button (με διπλό κλικ πάνω στο κουμπί):

Label1.Text = "Hello there " + TextBox1.Text + ", πώς αισθάνεσαι σήμερα;";

Εκτέλεση – δοκιμή - έλεγχος

Στην Page1.aspx:

Μέσα στο <div> (υπάρχει ήδη, αλλιώς εισαγωγή του από toolbox – HTML)
Εισαγωγή <h1> (από toolbar: Formatting), και βάζουμε ως κείμενο: “Είναι η Σελίδα 1”
Εισαγωγή <p> (με enter σε Design view ή από Formatting)
Εισαγωγή του ‘μενού’ και της διαχωριστικής γραμμής με Αντιγραφή-Επικόλληση από την default.aspx.
Εισαγωγή Label (από toolbox – Standard) και Text="Good morning!"
Εισαγωγή script μέσα στo κώδικα της σελίδας (βάλτε το πριν το <html>)

protected void Page_Load(object sender, EventArgs e)

{

if (DateTime.Now.Hour < 12)

Label1.Text = "Καλημέρα!";

else

Label1.Text = "Καλησπέρα!";

}

</script>

Εκτέλεση – δοκιμή – έλεγχος. Υπάρχει πρόβλημα; Κάντε την Ιδιότητα AutoEventWireup="True"

· Στην Page2.aspx

Μέσα στο <div> (υπάρχει ήδη, αλλιώς από το toolbox – HTML)
Εισαγωγή <h1> “Είναι η Σελίδα 2”
Εισαγωγή <p> (με enter σε Design view ή από Formatting)
Εισαγωγή του ‘μενού’ και της διαχωριστικής γραμμής με Αντιγραφή-Επικόλληση από την default.aspx.
Εισαγωγή <br />
Εισαγωγή του ‘Enter your name:’, του textbox, του button και του label με Αντιγραφή-Επικόλληση από την default.aspx.
Υποστήριξη του γεγονότος κλικ για το κουμπί με εναλλακτικό τρόπο - Εισαγωγή script μέσα στον κώδικα (πριν το <html>):

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text = "Hello there " + TextBox1.Text + ", πώς αισθάνεσαι σήμερα;";

}

</script>

Εκτέλεση – δοκιμή - έλεγχος
Αλλάξτε τον τίτλο και το χρώμα υποβάθρου στις 3 σελίδες (βάζοντας <body bgcolor=…>)
Εκτέλεση – δοκιμή - έλεγχος

2.2. Χρήση και επεξεργασία προτύπων και μορφοποιήσεων CSS

Εκφώνηση:

Δημιουργήστε έναν Ιστότοπο τεσσάρων σελίδων (Home, Technology, Finance, Sports) παρόμοιο με την παραπάνω εικόνα, κάνοντας χρήση σελίδας-πρότυπο (master page) και μορφοποιήσεων Cascading Style Sheet (CSS). Για το μενού επιλογών χρησιμοποιείστε το εξειδικευμένο σχετικό εργαλείο (Menu control στην κατηγορία Navigation).

Εικόνα 5.2 Βασική, αρχική Ιστοσελίδα με μορφοποίηση

Δημιουργήστε έναν Ιστότοπο τεσσάρων σελίδων (Home, Technology, Finance, Sports) παρόμοιο με τη παραπάνω εικόνα, κάνοντας χρήση σελίδας-πρότυπο (master page) και μορφοποιήσεων Cascading Style Sheet (CSS). Για το μενού επιλογών χρησιμοποιείστε το εξειδικευμένο σχετικό εργαλείο (Menu control στη κατηγορία Navigation).

Υποδειγματική λύση:

Δημιουργία καινούργιου άδειου Iστότοπου (New Empty Web Site), γλώσσα C#, με όνομα “NewsSite”
Εισαγωγή σελίδας-πρότυπο: επιλέγουμε new Master Page (με δεξί κλικ πάνω στο όνομα του site στο παράθυρο Solution Explorer και επιλογή Add New Item). Εξέταση του κώδικα (υπάρχει ένας ContentPlaceHolder στο <head> με id="head", και ένας στο <body> με id = “ContentPlaceHolder1”)
Αλλαγή του id “ContentPlaceHolder1” (που ανήκει στο <body>) σε “PageContent”
Εισαγωγή εξωτερικού αρχείου μορφοποιήσεων CSS, με όνομα StyleSheet.css (File -> New -> File -> Style Sheet)
Η γενική μορφή των κανόνων μορφοποίησης CSS δίνεται στην παρακάτω εικόνα

Εικόνα 5.3 Γενική μορφή κανόνων CSS

Επεξεργασία μορφοποιήσεων: επιλογή στο αρχείο StyleSheet.css του selector ‘body’, εμφάνιση (αν δεν είναι εμφανής ήδη) της toolbar Style Sheet (από το μενού View), και click στο εικονίδιο του toolbar “build style” για να εμφανιστεί το παράθυρο/πλαίσιο διαλόγου μορφοποιήσεων CSS:
Ας επιλέξουμε background -> background color, με ένα χρώμα της αρεσκείας μας (Navy). Προκύπτει:

body

{

background-color: navy;

}

Προαιρετικά μπορούμε να βάλουμε και font-family, font-size, κ.α. Σε ότι δεν ορίσουμε, ισχύουν οι προεπιλογές (“browser default”)

Στην Master Page

Σύνδεση με το StyleSheet, βάζουμε μέσα στο <head> ένθετη ετικέτα:

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

Εμφάνιση των αλλαγών στο Design – Παρατήρηση αποτελεσμάτων

Εισαγωγή ενός <div> σε συγκεκριμένη θέση: Πηγαίνουμε στον κώδικα, επιλογή όλων των στοιχείων ανάμεσα στο <body></body>, δεξί κλικ και surround with -> html -> div). Εισαγωγή παραμέτρου id=”page” στο div

Στο Style Sheet

Προσθέτουμε selector #page { }. Στο selector page κάνουμε build style και βάζουμε τις ακόλουθες ρυθμίσεις:

#page

{

border-style: outset;

margin: 0px auto auto auto;

width: 950px;

color: silver;

background-color: blue;

}

Δοκιμάζουμε να γράψουμε κείμενο στο Master Page και βλέπουμε στο design το αποτέλεσμα των μορφοποιήσεων #page
Δημιουργία της επικεφαλίδας με το λογότυπο του ΠΑΜΑΚ και το τίτλο. Στο Master Page:

Μετά το άνοιγμα του div “page” εισαγωγή div με id=”header” και μέσα σε αυτό εισαγωγή της εικόνας του ΠΑΜΑΚ. [Έχουμε φροντίσει να ‘κατεβάσουμε’ την εικόνα ως αρχείο (university_logo.jpg) και την έχουμε αποθηκεύσει σε έναν φάκελο images που δημιουργήσαμε για αυτόν τον σκοπό.]

<img src="images/university_logo.jpg" />

Εισαγωγή div με id=”title” (μέσα στο header) που περιέχει το κείμενο: ‘Τα νέα του ΠΑΜΑΚ’

Μορφοποιήσεις (Στοίχιση, μέγεθος, χρώματα…). Στο αρχείο StyleSheet:

Εισαγωγή κανόνων CSS για το id=”header”, την εικόνα, και το id=”title”

#header

{

height: 234px;

}

img

{

float: left; /* απαραίτητο ώστε να έχουμε εικόνα και κείμενο μαζί */

/* προσέξτε ότι το img δεν έχει πριν ‘#’ γιατί δεν είναι id */

}

#title

{

float: right; /* απαραίτητο ώστε να έχουμε εικόνα και κείμενο μαζί */

width: 600px;

height: 234px;

color: navy;

text-align: center;

line-height: 250px; /* γρήγορη τεχνική για κάθετο κεντράρισμα */

font-size: 60px;

font-weight: bold;

}

Παρατηρούμε στο Master Page το αποτέλεσμα των μορφοποιήσεων
Συνεχίζουμε στο Master Page, για να βάλουμε το μενού:

Μετά το κλείσιμο του “header” div, και μέσα στο form, πριν το υπάρχον περιεχόμενο, εισαγωγή νέου div με id=”menu” και μέσα σε αυτό εισαγωγή Menu από το Toolbox (κατηγορία: Navigation)

Εισαγωγή τεσσάρων ακόμα σελίδων (Home, Technology, Finance, Sports) ως content pages (με δεξί click στο master page: add content page)
Διαμόρφωση του navigation menu (Edit Menu Items) και σύνδεση με τις τέσσερις σελίδες. Προσοχή: Text – το ορατό κείμενο της επιλογής, NavigateUrl – η σύνδεση με την αντίστοιχη σελίδα. Επίσης βάλτε την ιδιότητα Orientation του Menu στην τιμή Horizontal. Παρατηρήστε τον κώδικα που παράχθηκε.

Στο αρχείο StyleSheet.css, εισάγουμε κανόνες CSS για το id=’menu’

#menu

{

border-style: outset;

border-width: thin;

}

Προβολή των σελίδων και επιβεβαίωση ότι ακολουθούν τη ζητούμενη μορφοποίηση

Στο Master Page, κάνουμε τo ContentPlaceHolder να περικλείεται από div με id=”content” ώστε να το μορφοποιήσουμε με CSS κανόνες

Μορφοποίηση του content με συμπληρωματικούς κανόνες στο Style Sheet:

#content

{

margin: 10px;

}

#content img /* img που εμπεριέχεται σε content*/

{

border: thick double #800000;

height: 68px;

width: 100px;

}

#content h3 /* h3 που εμπεριέχεται σε content*/

{

color:black;

}

Ελέγξτε τις μορφοποιήσεις αυτές. Βάλτε για παράδειγμα κείμενο με μορφοποίηση <h3> εντός της περιοχής ‘content’, και άλλο κείμενο με μορφοποίηση <h3> εκτός αυτής. Παρατηρήστε ότι στην πρώτη μόνο περίπτωση τα γράμματα γίνονται μαύρα.

2.3. Προσαρμογή έτοιμου Ιστότοπου - χρήση των Application και Session Events

Εκφώνηση:

Δημιουργήστε έναν Ιστότοπο (με κεφαλίδα 'Multi-User Site') αξιοποιώντας και προσαρμόζοντας την παρεχόμενη λειτουργικότητα των συστατικών που αυτόματα δημιουργεί το περιβάλλον ανάπτυξης VS 2012. Στη συνέχεια προσθέστε μια νέα σελίδα Statistics.aspx, σύμφωνη με το υπάρχον πρότυπο, και συνδέστε την επιλογή 'Στατιστικά' του μενού. Στη σελίδα αυτή αρχικά μέσω 2 textboxes δώστε ένα παράδειγμα χρήσης της ιδιότητας IsPostBack που ελέγχει την ύπαρξη/διατήρηση ενός session και στη συνέχεια δημιουργείστε κατάλληλα application και session events για να εμφανίζετε ένα μήνυμα που ενημερώνει πόσοι χρήστες χρησιμοποιούν αυτή τη στιγμή τον Ιστότοπο (δείτε την παρακάτω εικόνα).

Εικόνα 5.4 Ιστοσελίδα με πολλούς χρήστες ταυτόχρονα

Υποδειγματική λύση:

Δημιουργία νέου έτοιμου Ιστότοπου (ASP.NET Web Forms site) με όνομα “Lab3” και γλώσσα C#.

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

Επεξεργασία της σελίδας-πρότυπο (Master Page, αρχείο Site.master)

Εντοπισμός στον κώδικα και αλλαγή της επικεφαλίδας: είναι ως class=”site-title” και έχει τιμή “your logo here”. Αλλάξτε το σε “Multi-User Site”

<a runat="server" href="~/">Multi-User Site</a>
</p>

Αλλαγή του υποσέλιδου. Θέλουμε το σύμβολο copyright, δίπλα το τρέχον έτος και δίπλα το κείμενο “ – Lab 3”. Προσέξτε ότι για τον υπολογισμό του τρέχοντος έτους ζητούμε την εκτέλεση της κατάλληλης συνάρτησης, χρησιμοποιώντας στην ετικέτα το σύμβολο ‘%’:

Αλλαγή του title (εμφανίζεται στον browser ως τίτλος της καρτέλας/παραθύρου). Και εδώ, θέλουμε να συνδυάσουμε ‘δυναμικό κείμενο’, όπως ποιος είναι ο τίτλος της τρέχουσας σελίδας, με το σταθερό κείμενο “ - Lab 3 – T.H.E.”. Πάλι το σύμβολο ‘%’ μπορεί να ‘υπολογίσει’ την τιμή μιας ιδιότητας (Page.Title):

Εντοπισμός διασύνδεσης με αρχεία μορφοποίησης (υπάρχει αρχείο Content/Site.css, το εντοπίζουμε κάνοντας: Edit->Find “Site.css”)

( … και βρίσκουμε στο αρχείο Bundle.config την αναφορά που συνδέει το αρχείο μορφοποιήσεων με τη σελίδα-πρότυπο.)

Προσθήκη κανόνα CSS ώστε να εμφανίζει την επικεφαλίδα σε μορφή “small-caps” (εμφάνιση του CSS properties παραθύρου – βρίσκεται από το View-> CSS Properties, click στην επικεφαλίδα “Multi-User Site” και πάτημα του Summary στο CSS properties. Δεξί κλικ στην κατάλληλη γραμμή του Applied Rules και επιλογή Modify Style για το γνώριμο πλαίσιο διαλόγου κανόνων CSS).

Εντοπισμός του κανόνα και στο .css αρχείο:

.site-title {

color: #c8c8c8;

font-family: Rockwell, Consolas, "Courier New", Courier, monospace;

font-size: 2.3em;

à font-variant: small-caps;

margin: 0;

}

Εντοπίστε το background-color και αλλάξτε το σε χρώμα σκούρο κόκκινο:

background-color: #990033;

Βάλτε στην επικεφαλίδα διπλό περίγραμμα (border), παχύ (thick), και για να φανεί αυτό δείτε ότι πρέπει να βάλετε κάποια τιμή στο margin (έστω auto). Όταν τελειώσετε την άσκηση, επιστρέψτε σε αυτό το σημείο και πειραματιστείτε στην αλλαγή κανόνων CSS

Εισαγωγή νέας σελίδας βασισμένη στο πρότυπο Site.master με το όνομα Statistics.aspx
Εντοπισμός του μενού (δίνοντας Edit->Find “Home”) και προσθήκη της σελίδας Statistics στο menu του προτύπου (με copy την επιλογή ενός υπάρχοντος στοιχείου του μενού, πχ. του Contact, και προσαρμογή του):

<nav>

<li><a runat="server" href="~/About">About</a></li>

<li><a runat="server" href="~/Contact">Contact</a></li>

<li><a runat="server" href="~/Statistics">Στατιστικά</a></li>

</ul>

</nav>

Αντικαταστήστε το favicon με ένα άλλο favicon2 (πρέπει να εντοπίσετε/κατεβάσετε ένα άλλο αρχείο .ico, να το προσθέσετε (add existing item) στο site και να ενημερώσετε την αντίστοιχη εντολή:

Βρείτε/δείτε που εμφανίζεται, κάνοντας εκτέλεση του Ιστότοπου.

Ιδιότητα IsPostBack και έλεγχος για session:

Στην σελίδα Statistics

Εισαγωγή δύο textbox και ενός κουμπιού από το toolbox

Προσθήκη κώδικα ώστε το περιεχόμενου του δεύτερου textbox να γεμίζει με το περιεχόμενο του πρώτου textbox με το πάτημα του κουμπιού και εκτέλεση για δοκιμή

protected void Button1_Click(object sender, EventArgs e)

{

TextBox2.Text = TextBox1.Text;

}

Έστω ότι θέλουμε να αρχικοποιούμε το TextBox1 και γνωρίζουμε την τιμή εκ των προτέρων, π.χ. «Καλημέρα». Δοκιμάζουμε αρχικά κάνοντας χρήση του παράθυρου ιδιοτήτων (property window), και βάζοντας την τιμή «Καλημέρα». Κάντε δοκιμές στην εκτέλεση: πατήστε κατευθείαν το κουμπί για να δείτε το «Καλημέρα» και στο TextBox2, και δείτε αν αυτό συμβαίνει και όταν αλλάξετε το περιεχόμενο του TextBox1, πχ. σε Θεσσαλονίκη, και μετά πατήστε το κουμπί να δείτε τι εμφανίζεται στο TextBox2. Κανονικά δε θα έχετε πρόβλημα.

Έστω όμως ότι δε γνωρίζουμε από την αρχή με ποια τιμή θέλουμε να αρχικοποιήσουμε το TextBox1. Οπότε δεν μπορούμε να χρησιμοποιήσουμε το παράθυρο ιδιοτήτων. Σβήστε λοιπόν στο παράθυρο ιδιοτήτων του TextBox1 την τιμή «Καλημέρα» από την ιδιότητα Text. Η αρχικοποίηση θα γίνει δυναμικά, με κώδικα: στο Page_Load event κάνουμε αρχικοποίηση του περιεχομένου του ΤextΒox1:

string minima="Καλησπέρα";

protected void Page_Load(object sender, EventArgs e)

{

TextBox1.Text = minima;

}

Εκτέλεση και δοκιμές ξανά. Παρατηρούμε ότι αλλάζοντας το περιεχόμενο του TextBox1, με το πάτημα του κουμπιού, ξαναεπιστρέφει η τιμή «Καλησπέρα». Αυτό μας ‘δείχνει’ ότι το Page_Load event προηγείται του Button1_ Click και έχουμε τελικά πάντα «Καλησπέρα» ως τιμή

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

string minima="Καλησπέρα";

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack) {

TextBox1.Text = minima;

}

Εκτέλεση και δοκιμή

Συμβάντα εφαρμογής (καθολικά για όλον τον Ιστότοπο - application events) και συμβάντα συνεδρίας χρήστη (user session events):

Application Object – Session Object

Ένα Application Object δημιουργείται όταν ο πρώτος χρήστης κάνει το πρώτο request στoν Ιστότοπό μας. Έχει εμβέλεια σε όλες τις σελίδες και σε όλους τους χρήστες. Καταστρέφεται όταν κλείσει ο web server ή μετά από μεγάλη αδράνεια

Ένα Session Object δημιουργείται ξεχωριστά για κάθε χρήστη όταν κάνει το πρώτο του request στον Ιστότοπό μας. Έχει εμβέλεια σε όλες τις σελίδες για κάθε χρήστη. Καταστρέφεται μετά από αδράνεια του χρήστη (π.χ. 20 min)

Μπορούμε να χειριστούμε τα events της δημιουργίας και της καταστροφής των αντικειμένων του Application και του Session από το αρχείο Global.asax. Παράδειγμα:

Στο Global.asax

Εισαγωγή μεταβλητής που μετράει τους χρήστες στο Application_Start event

void Application_Start(object sender, EventArgs e)

{

// Code that runs on application startup

…

Application["UserCount"] = 0;

}

Αύξηση της μεταβλητής όταν χρησιμοποιεί τον Ιστότοπό μας νέος χρήστης. Μείωση της μεταβλητής όταν λήξει το Session του χρήστη

void Session_Start(object sender, EventArgs e)

{

// Code that runs when a new session is started

Application["UserCount"] = Convert.ToUInt32(Application["UserCount"]) + 1;

}

void Session_End(object sender, EventArgs e)

{

// Code that runs when a session ends.

// Note: The Session_End event is raised only when the sessionstate mode

// is set to InProc in the Web.config file. If session mode is set to StateServer

// or SQLServer, the event is not raised.

Application["UserCount"] = Convert.ToUInt32(Application["UserCount"]) - 1;

}

Στην σελίδα Statistics

Εισαγωγή Label από το toolbox

Μετατροπή του Page_Load event ώστε να εμφανίζει τους τρέχοντες χρήστες στο label

protected void Page_Load(object sender, EventArgs e)

{

…

Label1.Text = "Αυτή τη στιγμή χρησιμοποιούν τον Ιστότοπο " +
Convert.ToString(Application["UserCount"]) + " χρήστες";

}

Εκτέλεση και δοκιμή (refresh σελίδας, άνοιγμα νέου browser και αντιγραφή του url του Ιστότοπου για να προσομοιώσουμε 2^ο χρήστη, refresh ξανά κτλ.)

Προσοχή: Δε βλέπουμε τον αριθμό των χρηστών να ελαττώνεται. Για να γίνει το συμβάν Session_End, σύμφωνα και με τα σχόλια που υπάρχουν στο αντίστοιχο τμήμα του αρχείου Global.asax, πρέπει να πάμε στο αρχείο Web.config, μέσα στο τμήμα του <system.web>, και να βάλουμε:

Έτσι θέτουμε το mode στην επιθυμητή κατάσταση και αλλάζουμε σε 1 λεπτό τον χρόνο αδράνειας για τη λήξη του session (για να μπορούμε να κάνουμε έλεγχο αμέσως μετά από ένα λεπτό αδράνειας).

2.4. Φόρμες και Επικύρωση Δεδομένων (Validation)

Εκφώνηση:

Δημιουργήστε έναν Ιστότοπο (με κεφαλίδα 'Contact Site') αξιοποιώντας την παρεχόμενη λειτουργικότητα των συστατικών που αυτόματα δημιουργεί το περιβάλλον ανάπτυξης VS 2012. Κάντε μια σειρά αλλαγών: αλλάξτε το υπόβαθρο του κύριου μέρους των σελίδων σε καφέ, ενώ στο υποσέλιδο το υπόβαθρο κάντε το κόκκινο. Τα γράμματα στο υπόβαθρο να είναι κίτρινα. Τέλος, όταν περνάει το ποντίκι πάνω από το μενού (event 'hover') τα γράμματα κάντε τα να γίνονται κίτρινα. Στη συνέχεια προσθέστε μια νέα σελίδα Validators.aspx, σύμφωνη με το υπάρχον πρότυπο, και συνδέστε την επιλογή 'Φόρμα' του μενού. Στη σελίδα αυτή βάλτε έναν πίνακα 18 γραμμών και 2 στηλών για να δώσετε σε μια στήλη περιγραφές στοιχείων (π.χ. όνομα, πόλη κλπ.) που πρέπει ο χρήστης να γεμίσει στα πεδία της διπλανής στήλης (δείτε την παρακάτω εικόνα). Χρησιμοποιείστε εργαλεία επικύρωσης (validators) για να ελέγξετε την εισαγωγή των στοιχείων που κάνει ο χρήστης (έλεγχος ότι δεν έμεινε ένα πεδίο της φόρμας άδειο, έλεγχος ότι έγινε μια επιλογή από μια πτυσσόμενη λίστα, έλεγχος ότι το mail που δόθηκε έχει σωστή 'μορφοποίηση', έλεγχος ότι πατήθηκε ένα checkbox).

Εικόνα 5.5 Σελίδα επικοινωνίας

Υποδειγματική λύση:

Δημιουργία νέου έτοιμου Ιστότοπου (ASP.NET Web Forms site) με όνομα “Lab4” και γλώσσα C#.
Εισαγωγή καινούργιας σελίδας βασισμένη στο πρότυπο με το όνομα Validators.aspx
Προσθήκη της σελίδας Validators στο menu του προτύπου, με κείμενο ‘Φόρμα’ και εκτέλεση
Επεξεργασία του προτύπου Master Page
·         Δημιουργία νέου έτοιμου Ιστότοπου (ASP.NET Web Forms site) με όνομα “Lab4” και γλώσσα C#.

·         Εισαγωγή καινούργιας σελίδας βασισμένη στο πρότυπο με το όνομα Validators.aspx

·         Προσθήκη της σελίδας Validators στο menu του προτύπου, με κείμενο ‘Φόρμα’ και εκτέλεση

·         Επεξεργασία του προτύπου Master Page

o   Αλλαγή της κεφαλίδας σε “Contact Site”

o   Αλλαγές στη μορφοποίηση του Προτύπου και εκτέλεση

·         Επεξεργασία του Site.css για αλλαγές στο πρότυπο .master

§ Στο body καφέ υπόβαθρο: background-color: brown;

§ Στο υποσέλιδο (footer) κόκκινο υπόβαθρο:
    background-color: red;

§ Θέλουμε κίτρινα τα γράμματα στο υποσέλιδο:

    color: yellow;

§ Εναλλακτικά:

.float-left {

    …

    color: yellow;

}

§ Προσέξτε ότι και η επικεφαλίδα Contact Site είναι μέσα σε περιοχή .float-left. Γιατί όμως δεν έγιναν και εκεί κίτρινα τα γράμματα; Ποια είναι η ειδικότερη ρύθμιση/κανόνας css που ισχύει;

§ Θέλουμε όταν περνάει το ποντίκι πάνω από το μενού (event ‘hover’) τα γράμματα να γίνονται κίτρινα:

ul#menu li a:hover {

            …

            color: yellow;

        }

§ Μπορείτε να δοκιμάσετε και άλλες αλλαγές

·         Στην σελίδα Validators:

o   Εισαγωγή πίνακα 18x2 (από μενού Table)

o   Στην πρώτη γραμμή ενώνουμε τα κελιά (επιλέγουμε τη γραμμή και από το μενού επιλέγουμε Table – Modify – Merge Cells) και γράφουμε με καφέ μεγάλα γράμματα Φόρμα Επικοινωνίας

o   Αφήνουμε τη δεύτερη γραμμή κενή

o   Στην τρίτη γραμμή προσθέτουμε το κείμενο Όνομα στο αριστερό κελί και στο δεξί κελί ένα Τextbox. Δίνουμε το ID txtName στις ιδιότητες του Textbox.

o   Έστω ότι θέλουμε να μην μπορεί να αφήνει κενό το textbox ο χρήστης, όταν συμπληρώνει τη φόρμα. Από την κατηγορία Validation στο Toolbox εισάγουμε δίπλα στο Textbox το στοιχείο RequiredFieldValidator. Στις Ιδιότητες του RequiredFieldValidator αλλάζουμε τα

§ ErrorMessage: Πρέπει να συμπληρώσετε το όνομά σας

§ Text: *

§ ForeColor: Red

§ ControlToValidate: txtName

o   Για να δοκιμάσουμε τη συμπεριφορά του validator, στην τελευταία γραμμή του πίνακα, στο δεξί κελί προσθέτουμε ένα button από το toolbox με text: Υποβολή (προσέξτε την ιδιότητα CausesValidation να είναι True)

o   Κάτω από τον πίνακα εισάγουμε το στοιχείο Validation Summary (είναι και αυτό στην κατηγορία Validation του Toolbox) και σε αυτό αλλάζουμε τα

§ ForeColor: Red

§ HeaderText: Προσοχή:

·         Δοκιμή της φόρμας μας

o   αφήστε κενό το textbox και πατήστε Υποβολή. Παρατηρήστε τι εμφανίζεται κάτω από το κουμπί ‘Υποβολή’

o   Βάλτε κάποιους χαρακτήρες στο textbox και πατήστε Υποβολή. Τι άλλαξε;

Αλλαγή της κεφαλίδας σε “Contact Site”

Αλλαγές στην μορφοποίηση του Προτύπου και εκτέλεση

Επεξεργασία του Site.css για αλλαγές στο πρότυπο .master

Στο body καφέ υπόβαθρο: background-color: brown;

Στο υποσέλιδο (footer) κόκκινο υπόβαθρο:
background-color: red;

Θέλουμε κίτρινα τα γράμματα στο υποσέλιδο:

color: yellow;

Εναλλακτικά:

.float-left {

…

color: yellow;

}

Προσέξτε ότι και η επικεφαλίδα Contact Site είναι μέσα σε περιοχή .float-left. Γιατί όμως δεν έγιναν και εκεί κίτρινα τα γράμματα; Ποια είναι η ειδικότερη ρύθμιση/κανόνας css που ισχύει;

Θέλουμε όταν περνάει το ποντίκι πάνω από το μενού (event ‘hover’) τα γράμματα να γίνονται κίτρινα:

ul#menu li a:hover {

…

color: yellow;

}

Μπορείτε να δοκιμάσετε και άλλες αλλαγές

Στην σελίδα Validators:

Εισαγωγή πίνακα 18x2 (από μενού Table)

Στην πρώτη γραμμή ενώνουμε τα κελιά (επιλέγουμε την γραμμή και από το μενού επιλέγουμε Table – Modify – Merge Cells) και γράφουμε με καφέ μεγάλα γράμματα Φόρμα Επικοινωνίας

Αφήνουμε την δεύτερη γραμμή κενή

Στην τρίτη γραμμή προσθέτουμε το κείμενο Όνομα στο αριστερό κελί και στο δεξί κελί ένα Τextbox. Δίνουμε το ID txtName στις ιδιότητες του Textbox.

Έστω ότι θέλουμε να μην μπορεί να αφήνει κενό το textbox ο χρήστης, όταν συμπληρώνει τη φόρμα. Από την κατηγορία Validation στο Toolbox εισάγουμε δίπλα στο Textbox το στοιχείο RequiredFieldValidator. Στις Ιδιότητες του RequiredFieldValidator αλλάζουμε τα

ErrorMessage: Πρέπει να συμπληρώσετε το όνομά σας

Text: *

ForeColor: Red

ControlToValidate: txtName

Για να δοκιμάσουμε την συμπεριφορά του validator, στην τελευταία γραμμή του πίνακα, στο δεξί κελί προσθέτουμε ένα button από το toolbox με text: Υποβολή (προσέξτε την ιδιότητα CausesValidation να είναι True)

Κάτω από τον πίνακα εισάγουμε το στοιχείο Validation Summary (είναι και αυτό στη κατηγορία Validation του Toolbox) και σε αυτό αλλάζουμε τα

ForeColor: Red

HeaderText: Προσοχή:

Δοκιμή της φόρμας μας

αφήστε κενό το textbox και πατήστε Υποβολή. Παρατηρήστε τι εμφανίζεται κάτω από το κουμπί ‘Υποβολή’

Βάλτε κάποιους χαρακτήρες στο textbox και πατήστε Υποβολή. Τι άλλαξε;

Εικόνα 5.6 Φόρμα επικοινωνίας

Όμοια με το Όνομα, κάνουμε για εξάσκηση τις αντίστοιχες ενέργειες για την επόμενη γραμμή με το Επώνυμο
Στις επόμενες γραμμές (5η-8η) βάζουμε Διεύθυνση 1, Διεύθυνση 2, Πόλη και Τ.K.
Θυμηθείτε όταν τελειώσουμε το παράδειγμα, για εξάσκηση, να τοποθετήσετε ελέγχους RequiredFieldValidator και στα πεδία 5^ης, 7^ης και 8^ης γραμμής
Βρισκόμαστε στην 9^η γραμμή και προσθέτουμε στο αριστερό κελί τη λέξη Νομός. Στο δεξί κελί εισάγουμε το αντικείμενο DropDownList από το Toolbox. Δίνουμε το ID lstStateList στις ιδιότητες του DropDownList και εισάγουμε σε αυτό (Edit Items) διάφορους Νομούς (π.χ. Θεσσαλονίκης, Καβάλας, Μαγνησίας)
Για να μπορέσουμε να δοκιμάσουμε Validators σε λίστα τιμών, καταχωρούμε και μια τιμή του τύπου: ‘Επιλέξτε νομό’. Την τιμή αυτή την ορίζουμε ως προεπιλογή (ζητάμε να έχει στην ιδιότητα Selected την τιμή True, και χωρίς να είναι υποχρεωτικό, αλλά για λόγους αισθητικούς τη βάζουμε στη θέση 0).
Από την κατηγορία Validator στο Toolbox εισάγουμε δίπλα στο DropDownList το στοιχείο CompareValidator. Στις Ιδιότητες του CompareValidator αλλάζουμε τα

ErrorMessage: Πρέπει να επιλέξετε τον νομό σας

Text: *

ForeColor: Red

ControlToValidate: lstStateList

Operator: NotEqual

ValueToCompare: Επιλέξτε νομό

Δοκιμή της φόρμας μας (με κενά όλα τα πεδία, με κενό ένα από τα πεδία, με κανένα κενό πεδίο)

Κάντε κλικ στα εικονίδια του σχήματος για επεξήγηση

Εικόνα 5.7 Χρήση Validators

Έστω ότι όταν όλα είναι έγκυρα, δε θέλουμε απλώς να μη βγαίνουν τα κόκκινα μηνύματα (του Validation Summary), αλλά θέλουμε να βγαίνει και ένα μήνυμα

Εικόνα 5.8 Επιτυχής καταχώρηση δεδομένων φόρμας

Για να βγει το μήνυμα, βάζουμε μέσα στη συνάρτηση Button1_Click τον ακόλουθο κώδικα:

if (Page.IsValid) {

ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "ClientScript",
"alert('Tα στοιχεία σας ελήφθησαν επιτυχώς')", true);

}

Κάνουμε τις αντίστοιχες ενέργειες και για τη Χώρα
Αφήνουμε μια γραμμή κενή

Εισάγουμε τη λέξη Μήνυμα αριστερά (12^η γραμμή) και ένα μεγαλύτερο σε ύψος Textbox δεξιά. Για να είναι πολλαπλών γραμμών, βάζουμε στην ιδιότητά του TextMode την τιμή Multiline.
Για να βγει η λέξη Μήνυμα στο ύψος της πρώτης γραμμής του multiline textbox, στην ιδιότητα style, επιλέγουμε Block-> vertical-align: top
Βάζουμε τον αντίστοιχο RequiredFieldValidator και αφήνουμε μια γραμμή κενή
Στο δεξί κελί της 14^ης γραμμής εισάγετε ένα Hyperlink από το Toolbox με κείμενο Όροι Χρήσης και να οδηγεί στη σελίδα About
Στην επόμενη γραμμή, στο δεξί κελί εισάγετε ένα checkbox από το Toolbar με text: Αποδέχομαι τους Όρους Χρήσης
Για να μην είναι το κείμενο κάτω από το checkbox, απενεργοποιούμε τον κανόνα css σχετικά με το display block

label {

/* display: block; */

font-size: 1.2em;

font-weight: 600;

}

Αφήνουμε μια γραμμή κενή

Στο αριστερό κελί της 17^ης γραμμής, εισάγετε το κείμενο E-mail και στο δεξί κελί ένα Textbox (με ID txtEmail – έχουμε δώσει σε όλα τα στοιχεία δικό μας ID) και εισάγουμε το αντίστοιχο RequiredFieldValidator. Εισάγουμε επίσης και ένα RegularExpressionValidator. Στο RegularExpressionValidator αλλάζουμε τα

ErrorMessage: To email που δώσατε δεν είναι σωστό
Text: *
ForeColor: Red

ControlToValidate: txtEmail

ValidationExpression: (επιλέγουμε Internet e-mail address)

Δοκιμή της φόρμας μας (με κενά όλα τα πεδία, με κενό ένα από τα πεδία, με κανένα κενό πεδίο, με λανθασμένο mail)

Εικόνα 5.9 Παράδειγμα με λάθη σε χρήση φόρμας

Επικύρωση για checkbox (χρήση CustomValidator μέσω κώδικα)

Στο Validators.aspx, στο τέλος μετά το

…

<asp:ValidationSummary ID="ValidationSummary1" runat="server"
ForeColor="Red" HeaderText="Προσοχή:" />

προσθέτουμε πριν το </asp:Content>, ένα CustomValidator (από το Toolbox-> Validation). Παρατηρούμε ότι δημιουργήθηκε ο ακόλουθος κώδικας:

<asp:CustomValidator ID="CustomValidator1" runat="server"

ErrorMessage="CustomValidator">
</asp:CustomValidator>

Ενημερώνουμε τις ιδιότητες ForeColor, ErrorMessage και το event OnServerValidate με τις ακόλουθες τιμές:

<asp:CustomValidator ID="CustomValidator1" runat="server" ForeColor =
"Red" ErrorMessage=" Παρακαλώ πατήστε το Checkbox!"

OnServerValidate="CustomValidator1_ServerValidate">
</asp:CustomValidator>

Στο Validators.aspx.cs προσθέτουμε τον ακόλουθο κώδικα:

protected void CustomValidator1_ServerValidate
(object source, ServerValidateEventArgs args)

{

args.IsValid = CheckBox1.Checked;

}

Δοκιμή ξανά της φόρμας μας

Παρατηρούμε ότι βγαίνει 2 φορές το μήνυμα λάθους από τον CustomValidator. H μία φορά είναι από το ErrorMessage και η άλλη από το ValidationSummary. Οπότε για να γλιτώσουμε από τη μια εμφάνιση αφαιρούμε την τιμή από το ErrorMessage και το μήνυμα λάθους το βάζουμε στην ιδιότητα Text. Και προκύπτει:

<asp:CustomValidator ID="CustomValidator1" runat="server"

ForeColor="Red" OnServerValidate="CustomValidator1_ServerValidate"> Παρακαλώ πατήστε το Checkbox!

· </asp:CustomValidator>

2.5. Σύνδεση σε Βάση Δεδομένων

Εκφώνηση:

Δημιουργήστε έναν Ιστότοπο (με κεφαλίδα 'Database Site') αξιοποιώντας την παρεχόμενη λειτουργικότητα των συστατικών που αυτόματα δημιουργεί το περιβάλλον ανάπτυξης VS 2012. Δημιουργήστε μια SQL Server βάση δεδομένων 'Customers.mdf' με έναν πίνακα πελατών 'Customer'. O πίνακας θα έχει 5 πεδία (δείτε την παρακάτω εικόνα). Εισάγετε σε αυτόν 4 γραμμές (εγγραφές) με στοιχεία. Στη συνέχεια προσθέστε μια νέα σελίδα 'Dbase.aspx', σύμφωνη με το υπάρχον πρότυπο, και συνδέστε τη με το μενού. Στη σελίδα αυτή να εμφανίσετε το περιεχόμενο του πίνακα Customer (στη κλασική μορφή πλέγματος στηλών και γραμμών). Προσθέστε ακόμη μια σελίδα 'Customers.aspx', σύμφωνη με το υπάρχον πρότυπο, και συνδέστε τη με το μενού. Στη σελίδα αυτή να εμφανίζονται μόνο τα πεδία 'Όνομα' και 'Επώνυμο' όλων των πελατών σε μορφή πλέγματος και επιπλέον να δίνετε τη δυνατότητα ο χρήστης να επιλέγει μια εγγραφή (έναν πελάτη) και από κάτω να εμφανίζονται στη σελίδα όλα τα πεδία-στοιχεία του πελάτη αυτού (δείτε την τελευταία εικόνα της παραγράφου).

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

Υποδειγματική λύση:

Δημιουργία νέου έτοιμου Ιστότοπου (ASP.NET Web Forms site) με όνομα “Lab5” και γλώσσα C#.
Επεξεργασία του Master Page

Αλλαγή της επικεφαλίδας σε “Database Site”

Δημιουργία και εμπλουτισμός ΒΔ

Επιλέγουμε το φάκελο App_Data (Application Data) του Ιστότοπου, κάνουμε δεξί κλικ, Add New Item, και προσθέτουμε SQL Server Database με το όνομα Customers.mdf.

Στο Server Explorer (View-> Server Explorer) αρχικά με δεξί κλικ πάνω στο Customers.mdf ζητάμε Refresh ώστε να μην υπάρχει πάνω του η ένδειξη του κόκκινου ‘x’ (που δηλώνει μη σύνδεση)

Επιλέγουμε Tables, δεξί κλικ, και Add New Table.

Προσοχή: για να αποθηκευτεί ο πίνακας με το όνομα Customer, πρέπει από αυτό το σημείο να πάμε στο κάτω παράθυρο (Design) και να αλλάξουμε την CREATE TABLE σε:

CREATE TABLE [dbo].[Customer]

Εισάγουμε τα στοιχεία του πίνακα όπως φαίνονται στην παρακάτω εικόνα. Στις ιδιότητες του CustomerID , στο πεδίο Identity Specification επιλεγούμε True στο Is Identity και ελέγχουμε ότι το CustomerID είναι primary key

Εικόνα 5.10 Δημιουργία βάσης δεδομένων

Για την αποθήκευση, πατάμε Update και στη συνέχεια Update Database.

Εικόνα 5.11 Αποθήκευση βάσης δεδομένων

Κάνουμε δεξί κλικ στον πίνακα Customer από τον Server Explorer και επιλέγουμε Show Table Data. Γεμίζουμε τον πίνακα με στοιχεία.

Εικόνα 5.12 Εισαγωγή δεδομένων στη βάση

Εισαγωγή καινούργιας σελίδας βασισμένη στο πρότυπο με το όνομα Dbase.aspx
Προσθήκη της σελίδας Dbase στο menu του προτύπου, με κείμενο ‘Βάση Δεδομένων’ και εκτέλεση

Στην σελίδα Dbase.aspx

Εισάγουμε από το toolbox – Data το στοιχείο SqlDataSource. To control αυτό δεν είναι ορατό. Ο σκοπός του είναι να αποκαταστήσει τη σύνδεση της Ιστοσελίδας με τη βάση δεδομένων. Κάνουμε κλικ στο Configure Data Source

επιλέγουμε τη βάση μας (επόμενο)

αποθηκεύουμε τη σύνδεση μας στο application configuration file όπως μας προτείνει (επόμενο)

επιλέγουμε την ανάκτηση όλων των στηλών του πίνακα (tick στο *) (επόμενο)

κάνουμε test query. Αφού δούμε τα δεδομένα μας πατάμε το Finish.

Τώρα θα βάλουμε ένα control που θα εμφανίζει τα περιεχόμενα των στοιχείων που φέρνει η προηγούμενη σύνδεση.

Εισάγουμε από το toolbox – Data το στοιχείο GridView. Σε αυτό επιλέγουμε τη σύνδεση που μόλις κάναμε ως Data Source (Choose data Source) η οποία έχει όνομα SqlDataSource1.

Εκτελούμε και βλέπουμε το αποτέλεσμα. Επιλέγουμε στο GridView μια μορφοποίηση της αρεσκείας μας (επιλογή Auto Format) και εκτέλεση ξανά.

Δημιουργούμε ακόμη μια νέα σελίδα Customers.aspx και την προσθέτουμε στο menu.

Μπορούμε πρώτα να βάλουμε ένα control για την εμφάνιση των στοιχείων και στη συνέχεια να διαμορφώσουμε την πηγή δεδομένων (data source):

Στην σελίδα που δημιουργήσαμε προσθέτουμε το στοιχείο DetailsView. Είναι μηχανισμός που δείχνει μια γραμμή κάθε φορά από ένα σύνολο στοιχείων (πχ, από ένα πίνακα). Επιλέγουμε New Data Source στο Choose Data Source του DetailsView.

επιλέγουμε SQL Database (επόμενο)

επιλέγουμε το ConnectionString που έχουμε ήδη δημιουργήσει και αποθηκεύσει προηγουμένως (επόμενο)

επιλέγουμε την ανάκτηση όλων των στηλών του πίνακα (tick στο *) (επόμενο)

κάνουμε test query. Αφού δούμε τα δεδομένα μας πατάμε το Finish.

αλλάζουμε το μέγεθος του στοιχείου και τη μορφοποίησή του (Auto Format). Κάνουμε tick την επιλογή Enable Paging (είναι απαραίτητο σε αυτό το σημείο για το control DetailsView, για να μπορούμε να περιδιαβαίνουμε στις διάφορες γραμμές του πίνακα.

εκτελούμε

Προσθέτουμε και ένα Gridview Control πάνω από το DetailsView

επιλέγουμε ως Data Source (Choose data Source) τη σύνδεσή μας με τη βάση (SqlDataSource1).

To μορφοποιούμε και κάνουμε tick στην επιλογή enable Selection.

Εκτελούμε

Στο Gridview επιλέγουμε Edit Columns. Με την επιλογή Auto-generate fields αποεπιλεγμένη προσθέτουμε στα Selected fields μόνο το Όνομα και το Επώνυμο.

Ελέγχουμε ότι έχει επιλεγεί και η στήλη Select και την πηγαίνουμε τελευταία.

Αποεπιλέγουμε το Enable Paging από το DetailsView (θα κάνουμε την επιλογή μέσω του GridView)

Επιλέγουμε το GridView, βρίσκουμε στo properties window (στα events) το selectedIndexChanged event και το κάνουμε διπλό click. Προσθέτουμε κώδικα στο event που δημιουργήθηκε ώστε η επιλογή στο GridView να μας πηγαίνει στην αντίστοιχη σελίδα του DetailsView.

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{

DetailsView1.PageIndex = GridView1.SelectedIndex;

}

Εκτελούμε

Εικόνα 5.13 Προβολή δεδομένων από μια βάση

2.6. Διαχείριση Βάσης Δεδομένων μέσω Ιστοσελίδας

Εκφώνηση:

Δημιουργήστε έναν Ιστότοπο (με κεφαλίδα 'Διαχείριση Database Site') αξιοποιώντας την παρεχόμενη λειτουργικότητα των συστατικών που αυτόματα δημιουργεί το περιβάλλον ανάπτυξης VS 2012. Δημιουργήστε μια SQL Server βάση δεδομένων 'Companies.mdf' με έναν πίνακα εταιριών 'Company'. O πίνακας θα έχει 5 πεδία (δείτε την παρακάτω εικόνα). Εισάγετε σε αυτόν 9 γραμμές (εγγραφές) με στοιχεία, για να μπορέσετε στη συνέχεια όταν παρουσιάζετε τα δεδομένα σε μια Ιστοσελίδα να 'πειραματιστείτε' με τη σελιδοποίηση των δεδομένων (θέτοντας πχ. το page size = 4). Στη συνέχεια προσθέστε μια νέα σελίδα 'Companies.aspx', σύμφωνη με το υπάρχον πρότυπο, και συνδέστε τη με το μενού. Στη σελίδα αυτή να εμφανίσετε το περιεχόμενο του πίνακα 'Company' (στη κλασική μορφή πλέγματος στηλών και γραμμών), όμως επιπλέον να δώσετε στους χρήστες του Ιστότοπου αυξημένες δυνατότητες - εισαγωγής/ενημέρωσης/διαγραφής των δεδομένων στον πίνακα αυτό. Ειδικότερα για την 'επικίνδυνη' ενέργεια της 'Διαγραφής', δημιουργήστε με κώδικα μια πιο ασφαλή έκδοση της εντολής 'Delete', αφού πριν την όποια διαγραφή, θα πρέπει να ζητείται επιβεβαίωση. Ειδικότερα για την υποστήριξη της λειτουργίας 'εισαγωγής', πρέπει να ξεφύγουμε από την παρουσίαση δεδομένων σε μορφή πλέγματος: πηγαίνετε στην υπάρχουσα σελίδα 'Contact.aspx', σβήστε το υπάρχον περιεχόμενο και μέσω ενός εργαλείου FormView δώστε δυνατότητες εισαγωγής/ενημέρωσης/διαγραφής των δεδομένων στον πίνακα Company (δείτε την τελευταία εικόνα της παραγράφου).

Υποδειγματική λύση:

Δημιουργία νέου έτοιμου Ιστότοπου (ASP.NET Web Forms site) με όνομα “Lab6” και γλώσσα C#.
Επεξεργασία του Master Page

Αλλαγή της κεφαλίδας σε “Διαχείριση Database Site”

Δημιουργία και εμπλουτισμός ΒΔ

Επιλέγουμε το φάκελο App_Data (Application Data) του Ιστότοπου, κάνουμε δεξί κλικ, Add New Item, και προσθέτουμε SQL Server Database με το όνομα Companies.mdf.

Στο Server Explorer (View-> Server Explorer) αρχικά με δεξί κλικ πάνω στο Companies.mdf ζητάμε Refresh ώστε να μην υπάρχει πάνω του η ένδειξη του κόκκινου x (που δηλώνει μη σύνδεση)

Επιλέγουμε Tables, δεξί κλικ, και Add New Table.

Προσοχή: για να αποθηκευτεί ο πίνακας με το όνομα ‘Company’, πρέπει από αυτό το σημείο να πάμε στο κάτω παράθυρο (Design) και να αλλάξουμε την CREATE TABLE σε:

CREATE TABLE [dbo].[Company]

Εισάγουμε τα στοιχεία του πίνακα όπως φαίνονται στην παρακάτω εικόνα. Και ελέγχουμε ότι το CompanyID είναι primary key. Προσέξτε ότι προτιμούμε τον τύπο nvarchar για να έχουμε και υποστήριξη Ελληνικών χαρακτήρων στα δεδομένα.

Εικόνα 5.14 Τροποποίηση πεδίων σε πίνακα

Για την αποθήκευση, πατάμε Update και στη συνέχεια Update Database.

Κάνουμε δεξί κλικ στον πίνακα Company από τον Server Explorer και επιλέγουμε Show Table Data. Γεμίζουμε τον πίνακα με δεδομένα. Πχ. με τις ακόλουθες 9 γραμμές.

Εικόνα 5.15 Εισαγωγή δεδομένων σε πίνακα

Εισαγωγή νέας σελίδας βασισμένη στο πρότυπο με το όνομα ‘Companies.aspx’
Προσθήκη της σελίδας ‘Companies’ στο menu του προτύπου, με κείμενο ‘Εταιρίες’ και εκτέλεση

Στην σελίδα Companies.aspx

Εισάγουμε από το toolbox – Data το στοιχείο GridView. Επιλέγουμε New Data Source στο Choose data Source

επιλέγουμε SQL Database και διατηρούμε το προτεινόμενο ID για τo control ‘πηγής δεδομένων’ (SqlDataSource1) και ΟΚ.

επιλέγουμε τη βάση μας Companies.mdf (επόμενο)

αποθηκεύουμε τη σύνδεση μας π.χ. με το όνομα «ConnectionStringComp» (επόμενο) – σημειώστε ότι η αποθήκευση θα γίνει στο application configuration file (Web.config)

επιλέγουμε την ανάκτηση των στηλών του πίνακα ‘CompanyID’, ‘Name’, ‘Description’ και (επειδή θέλουμε αυτή τη φορά να δώσουμε στους χρήστες του Ιστότοπου αυξημένες δυνατότητες – εισαγωγής/ενημέρωσης/διαγραφής των δεδομένων στη βάση)

Πατάμε το κουμπί Advanced και κάνουμε tick στις δυο επιλογές, Insert/update/delete – use opt. concurrency (επόμενο)

κάνουμε test query. Αφού δούμε τα δεδομένα μας πατάμε το Finish.

Στο GridView control κάνουμε tick to Enable Paging και επιλέγουμε μια αυτόματη μορφοποίηση (πχ. Simple). Εκτελούμε

Στις ιδιότητες του GridView control, στην κατηγορία Paging

αλλάζουμε το Pagesize σε 4

αλλάζουμε το NextPageText (PagerSettigs) σε Επόμενη και το PreviusPageText σε Προηγούμενη

αλλάζουμε το mode σε NextPrevious

εκτελούμε και βλέπουμε τις αλλαγές

αλλάζουμε το mode σε NextPreviousFirstLast

εκτελούμε και βλέπουμε τις αλλαγές

Στο GridView control

κάνουμε tick to Enable Sorting και εκτελούμε και βλέπουμε τις αλλαγές

Δοκιμάζουμε και ταξινομούμε τις εγγραφές (γραμμές) ανάλογα με τα διάφορα πεδία του πίνακα, πατώντας στους τίτλους των πεδίων (κατά αύξουσα και κατά φθίνουσα σειρά)

κάνουμε Edit Columns

· Τοποθετούμε το Description πάνω από το Name

· Αλλάζουμε το HeaderText του Description σε ‘Περιγραφή’ και του Name σε ‘Επωνυμία’

κάνουμε tick στο Enable Editing. Εκτελούμε και κάνουμε αλλαγές στη Βάση μας

κάνουμε tick στο Enable Deleting. Εκτελούμε και κάνουμε μια διαγραφή στη Βάση μας

Παρατηρήστε τον κώδικα του GridView1

Βάλτε τον ακόλουθο κώδικα ακριβώς πριν το </Columns> του GridView1:

<asp:TemplateField>

<asp:LinkButton ID="LinkButton1" Runat="server"

OnClientClick="return confirm('Είσαι σίγουρος;');"

CommandName="Delete">Διαγραφή</asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

</Columns>

Δημιουργήσαμε μια πιο ασφαλή έκδοση για την εντολή Delete, αφού πριν την όποια διαγραφή, μας ζητείται να την επιβεβαιώσουμε.

Μπορούμε τώρα να απενεργοποιήσουμε το εξ’ ορισμού link του Delete, βάζοντας False στην αντίστοιχη ιδιότητα: ShowDeleteButton="False"

Εικόνα 5.16 Ασφαλής 'Διαγραφή' στη βάση δεδομένων

Πηγαίνουμε στην υπάρχουσα σελίδα ‘Contact.aspx’ και αλλάζουμε το δεύτερο μέρος της επικεφαλίδας του από ‘Your contact page’ σε ‘Στοιχεία Εταιρίας’.
Προσθέτουμε το στοιχείο FormView, από το toolbox-Data. Επιλέγουμε New Data Source στο Choose data Source του FormView.

επιλέγουμε SQL Database (επόμενο)

επιλέγουμε το ConnectionString που έχουμε ήδη δημιουργήσει και σώσει προηγουμένως (επόμενο)

επιλέγουμε την ανάκτηση όλων των στηλών του πίνακα (tick στο *) (επόμενο)

πατάμε το κουμπί Advanced και κάνουμε tick στις δυο επιλογές (επόμενο)

κάνουμε test query. Αφού δούμε τα δεδομένα μας πατάμε το Finish.

Κάνουμε tick στο Enable Paging, αλλάζουμε τη μορφοποίησή του (Auto Format) και εκτέλεση

Μπορούμε εκτός από Edit και Delete να εισάγουμε και νέα δεδομένα. Κάντε εισαγωγή μιας νέας εταιρίας.
Επιλέγουμε Edit Templates και βλέπουμε πως μπορούμε να αλλάξουμε την εμφάνιση του FormView. Π.χ., επιλέγουμε ItemTemplate και αλλάζουμε το Name σε Επωνυμία και στο StartDateLabel επιλέγουμε Edit DataBindings και Format à Short date

Επιλέγουμε EndTemplateEditing για να κλείσουμε τη διόρθωση των templates

Εκτελούμε

Εικόνα 5.17 Εισαγωγή ('New') εγγραφής μέσω Ιστοσελίδας

2.7. Ηλεκτρονικό Κατάστημα με ASP.NET Web Forms

Εκφώνηση:

Στην άσκηση αυτή δημιουργούμε έναν Ιστότοπο (με κεφαλίδα 'Ηλεκτρονικό Κατάστημα') που ξεκινώντας από την παρεχόμενη λειτουργικότητα των συστατικών που αυτόματα δημιουργεί το περιβάλλον ανάπτυξης VS 2012, προχωρούμε στην υποστήριξη βασικών λειτουργιών ηλεκτρονικού καταστήματος με ένα στοιχειώδες καλάθι αγορών. Υπάρχουν αρκετά στοιχεία προηγούμενων ασκήσεων που ενσωματώνονται εδώ, όπως και αρκετά νέα.

Ένα ηλεκτρονικό κατάστημα υπερτερεί σε αρκετά σημεία ενός φυσικού καταστήματος: είναι άμεσα προσπελάσιμο από παντού στον κόσμο, η αναζήτηση προϊόντων και η σύγκριση τιμών είναι ευκολότερη και είναι ανοιχτό συνέχεια.

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

Υποδειγματική λύση:

Δημιουργία νέου έτοιμου Ιστότοπου (ASP.NET Web Forms site) με όνομα “Lab7” και γλώσσα C#.
Επεξεργασία του Master Page

Αλλαγή της επικεφαλίδας σε “Ηλεκτρονικό Κατάστημα ”

Δημιουργία και εμπλουτισμός ΒΔ:

Επιλέγουμε το φάκελο App_Data (Application Data) του Ιστότοπου, κάνουμε δεξί κλικ, Add New Item, και προσθέτουμε SQL Server Database με το όνομα Products.mdf.

Στο Server/Database Explorer (είναι μαζί με τον solution explorer σε tabs) επιλέγουμε Tables, δεξί κλικ, και Add New Table.

Προσοχή: για να αποθηκευτεί ο πίνακας με το όνομα Product, πρέπει από αυτό το σημείο να πάμε στο κάτω παράθυρο (Design) και να αλλάξουμε την CREATE TABLE σε:

CREATE TABLE [dbo].[Product]

Εισάγουμε τα στοιχεία του πίνακα όπως φαίνονται στην παρακάτω εικόνα. Ελέγχουμε ότι το ProductID είναι primary key. Επίσης, στις ιδιότητες του ProductID, στο πεδίο Identity Specification επιλεγούμε True στο Is Identity, και βάζουμε Identity Seed: 1000 (Αρχική τιμή) και Identity Increment: 10 (βήμα αύξησης).

Εικόνα 5.18 Εισαγωγή κλειδιού σε πίνακα της βάσης δεδομένων

Για τη δημιουργία του πίνακα, πατάμε Update και στη συνέχεια Update Database.

Κάνουμε δεξί κλικ στον πίνακα Product από τον Server Explorer και επιλέγουμε Show Table Data. Γεμίζουμε τον πίνακα με δεδομένα. Πχ. με τις ακόλουθες 7 γραμμές.

Εικόνα 5.19 Εισαγωγή ιδιοτήτων κλειδιού σε πίνακα της βάσης δεδομένων

Εικόνα 5.20 Εισαγωγή δεδομένων σε πίνακα

Στην σελίδα Default.aspx

Αλλάζουμε τις επικεφαλίδες h2 και h3, και σβήνουμε το υπόλοιπο περιεχόμενο (από το Design view) ώστε να έχουμε την παρακάτω εμφάνιση:

Εικόνα 5.21 Προβολή αρχικής σελίδας του ηλεκτρονικού καταστήματος

Εισάγουμε από το toolbox – Data το στοιχείο GridView. Επιλέγουμε New data source στο Choose Data Source

επιλέγουμε SQL Database (επόμενο)

επιλέγουμε τη βάση μας (επόμενο)

αποθηκεύουμε τη σύνδεση μας στο application configuration file όπως μας προτείνει, με το όνομα ConnStringProd (επόμενο)

επιλέγουμε την ανάκτηση όλων των στηλών του πίνακα (tick στο *)

Πατάμε το κουμπί WHERE και επιλέγουμε

· Column: Available

· Operator: =

· Source: None

· Value: True

· Πατάμε το κουμπί Add και το OK

· Βλέπουμε ότι σχηματίστηκε το παρακάτω query:

SELECT * FROM [Product] WHERE ([Available] = @Available)

Πατάμε το επόμενο και κάνουμε test query. Αφού δούμε τα δεδομένα μας (μόνο όσα είναι AVAILABLE, δηλαδή 5 από τις 7 γραμμές), πατάμε το Finish.

Στο GridView control κάνουμε tick to Enable Paging και επιλέγουμε μια μορφοποίηση. Εκτελούμε

Εικόνα 5.22 Προβολή προϊόντων

Στις ιδιότητες του GridView control, στην κατηγορία Paging

αλλάζουμε το Pagesize σε 4

αλλάζουμε το mode σε NextPreviousFirstLast

αλλάζουμε το NextPageText (PagerSettigs) σε ‘Επόμενο’ και το PreviusPageText σε ‘Προηγούμενο’

εκτελούμε και βλέπουμε τις αλλαγές

Στο GridView control

κάνουμε tick to Enable Sorting και Enable Selection. Επιλέγουμε μια μορφοποίηση, εκτελούμε και βλέπουμε τις αλλαγές

Εικόνα 5.23 Προβολή προϊόντων με δυνατότητα επιλογής τους

κάνουμε Edit Columns

· Αφαιρούμε τα πεδία ProductID , Description, Available και Quantity

· Αλλάζουμε στα πεδία που έμειναν τα HeaderText στα Ελληνικά (Όνομα, Τιμή)

· Δίνουμε στο πεδίο Price το {0:c} ως DataFormatString

· Στο Select Δίνουμε ως SelectText το ‘Λεπτομέρειες’ και μετακινούμε το πεδίο τελευταίο.

Εικόνα 5.24 Αλλαγή ιδιοτήτων προβολής

Εκτελούμε και βλέπουμε το αποτέλεσμα

Εικόνα 5.25 Προσαρμοσμένη προβολή προϊόντων

Αλλάζουμε (από το Design view) το h3-μορφοποίησης μήνυμα ‘Στη συνέχεια:’ με το ‘Ζητήσατε λεπτομέρειες για το προϊόν:’

Θέλουμε σε έναν μηχανισμό DetailsView, να βλέπουμε αναλυτικά το προϊόν που επιλέγουμε στο GridView.

Προσθέτουμε ένα στοιχείο DetailsView από κάτω. Επειδή θα κάνουμε διαφορετική επιλογή πεδίων σε αυτόν τον μηχανισμό, καλύτερα στο Choose Data Source του DetailsView να επιλέξουμε New data source, και στα επόμενα βήματα να αξιοποιήσουμε το υπάρχον ConnStringProd. Σημειώστε ότι χρειάζεται και εδώ να βάλουμε τον ίδιο περιορισμό με το WHERE που βάλαμε και στο GridView. Δηλαδή στο Test Query πρέπει να φαίνονται τα 5 διαθέσιμα προϊόντα.

αλλάζουμε το μέγεθος του στοιχείου και τη μορφοποίησή του (Auto Format)

κάνουμε click το Edit Fields

κρατούμε όλα τα πεδία εκτός από το Available και αλλάζουμε τα HeaderText στα Ελληνικά (Κωδικός, Όνομα, Περιγραφή, Τιμή, Ποσότητα)

δίνουμε στο πεδίο Price το {0:c} ως DataFormatString

Εικόνα 5.26 Αλλαγή ιδιοτήτων προβολής

Συνδέουμε τα δύο control μεταξύ τους, ώστε όταν πατάμε ‘Λεπτομέρειες’ στο GridView να βλέπουμε το προϊόν αναλυτικά στο DetailsView

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{

DetailsView1.PageIndex = GridView1.SelectedIndex + (GridView1.PageIndex * GridView1.PageSize);

}

Εκτελούμε και βλέπουμε το αποτέλεσμα

Εικόνα 5.27 Προβολή σελίδας με δύο συνδεδεμένους μηχανισμούς

Στην συνέχεια θέτουμε την ιδιότητα Visible του DetailsView ως false και προσθέτουμε μια επιπλέον εντολή στο SelectedIndexChanged event του Gridview ως εξής

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{

DetailsView1.PageIndex = GridView1.SelectedIndex + (GridView1.PageIndex * GridView1.PageSize);

DetailsView1.Visible = true;

}

Εκτελούμε και βλέπουμε το αποτέλεσμα

Προσθέτουμε ένα κουμπί κάτω από το DetailsView με Text Απόκρυψη και θέτουμε την ιδιότητα Visible ως false. Ως Button Click event δίνουμε το παρακάτω

protected void Button1_Click(object sender, EventArgs e)

{

DetailsView1.Visible = false;

Button1.Visible = false;

}

Ενημερώνουμε και πάλι το SelectedIndexChanged event του GridView με μια επιπλέον εντολή ως εξής

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{

DetailsView1.PageIndex = GridView1.SelectedIndex + (GridView1.PageIndex * GridView1.PageSize);

DetailsView1.Visible = true;

Button1.Visible = true;

}

Εκτελούμε και βλέπουμε το αποτέλεσμα

Δημιουργούμε έναν νέο φάκελο με το όνομα Administration και μια νέα σελίδα μέσα σε αυτόν τον φάκελο (φροντίζοντας κατά τη δημιουργία να επιλέξουμε να ακολουθεί την Master Page) με το όνομα AdminSelida.aspx. Ως περιεχόμενό της βάλτε το κείμενο «Σελίδα Διαχείρισης».
Προσθέτουμε ένα hyperlink σε αυτήν τη σελίδα από τη σελίδα Αbout.aspx, με text ‘Είσοδος Συνεργατών’

Εικόνα 5.28 Σχετικά με το κατάστημα (About Page)

Δημιουργία Ρόλων και Χρηστών (security issues)

Στο ASP.NET Configuration (στην γραμμή εργαλείων επιλέγουμε Website -> ASP.NET Configuration

Επιλέγουμε την ταμπέλα Security και κάνουμε click στο Select authentication type. Φροντίζουμε να είναι επιλεγμένη η επιλογή From the internet και πατάμε το Done

Είμαστε πίσω στην ταμπέλα Security και κάνουμε click στο Enable Roles

Εικόνα 5.29 Σελίδα διαχείρισης (ASP.NET Configuration)

Κάνουμε επίσης click και στο Create or Manage roles.

Στο textbox που εμφανίζεται γράφουμε Customer και πατάμε το Add Role

Δημιουργούμε με τον ίδιο τρόπο και τον ρόλο Administrator

Πηγαίνουμε πίσω με το κουμπί back και κάνουμε click στο Create User

Φτιάχνουμε δύο χρήστες User1 και User2 με ρόλο Customer

Φτιάχνουμε έναν χρήστη Admin με ρόλο Administrator (ως password βάλτε User1User1, User2User2 και AdminAdmin αντίστοιχα)

Θέλουμε να εφαρμόσουμε κανόνες ελέγχου προσπέλασης επιπέδου σύμφωνα με τους οποίους:

όλοι οι ανώνυμοι χρήστες (όσοι δεν έχουν κάνει login) ΔΕΝ θα έχουν πρόσβαση σε ολόκληρο το φάκελο Administration (οπότε θα ανακατευθύνονται στη φόρμα σύνδεσης Login.aspx για να συνδεθούν ως χρήστες και να ελεγχθεί έτσι το επίπεδο δικαιωμάτων που έχουν) και

μόνο οι χρήστες με ρόλο Administrator θα μπορούν να βλέπουν τη σελίδα διαχείρισης AdminSelida. Όλοι οι χρήστες με άλλους ρόλους θα ανακατευθύνονται σε μια σελίδα OxiProsvasi.aspx που θα περιέχει κατάλληλο μήνυμα.

Στο ASP.NET Configuration (στην γραμμή εργαλείων επιλέγουμε Website -> ASP.NET Configuration

Επιλέγουμε την ταμπέλα Security και κάνουμε click στο Create access rules.

Κάνουμε click στον φάκελο Administration και επιλέγουμε Anonymous users και deny

Κάνουμε click στον Manage Access Rules και στο Add new access rule και με τον ίδιο τρόπο (πάλι για τον φάκελο Administration)

· Administrator, Allow

Εικόνα 5.30 Δικαιώματα πρόσβασης (access rules)

δημιουργούμε μια νέα σελίδα OxiProsvasi.aspx στον γενικό φάκελο. Γράφουμε στην καινούργια σελίδα το κόκκινο h2-κείμενο “Δεν έχετε δικαιώματα πρόσβασης – Μόνο στους Διαχειριστές επιτρέπεται η είσοδος”

Στην κώδικα της σελίδας AdminSelida.aspx προσθέτουμε στο event Page Load τον παρακάτω κώδικα:

protected void Page_Load(object sender, EventArgs e)

{

if (!User.IsInRole("Administrator"))

Server.Transfer("../OxiProsvasi.aspx");

}

Βάλτε ως αρχική σελίδα (Set As Start Page) τη σελίδα Default.aspx

Εκτελούμε και βλέπουμε πως υλοποιούνται οι κανόνες που θέσαμε με τις αλλαγές που κάναμε. Δοκιμάστε είσοδο ως μη-συνδεδεμένος χρήστης, ως user1 και ως Admin.

Εικόνα 5.31 Μήνυμα προς μη εξουσιοδοτημένους χρήστες

B’ μέρος (στοιχειώδες καλάθι αγορών):

Δημιουργούμε έναν νέο φάκελο με το όνομα Registered και μια νέα σελίδα μέσα σε αυτόν τον φάκελο (φροντίζοντας κατά τη δημιουργία να επιλέξουμε να ακολουθεί την MasterPage) με το όνομα Cart.aspx

Στο ASP.NET Configuration (στην γραμμή εργαλείων επιλέγουμε Website ->ASP.NET Configuration

Επιλέγουμε την ταμπέλα Security και κάνουμε click στο Create access rules.

Κάνουμε click στον φάκελο Registered και επιλέγουμε Anonymous users και Deny

Κάνουμε click στο Manage Access Rules και στο Add new access rule και με τον ίδιο τρόπο

· Administrator, Allow

· Customer, Allow

Προσθέτουμε τη σελίδα Cart στο menu του προτύπου (Καλάθι Αγορών) και εκτελούμε και ελέγχουμε αν οι κανόνες που θέσαμε λειτουργούν σωστά

Στην σελίδα Default.aspx

Στα Tasks του GridView control επιλέγουμε Add New Column.

Επιλέγουμε TemplateField ως Field Type

Στο Header Text γράφουμε No. (δηλαδή Νούμερο) και πατάμε OK.

Μεταφέρουμε την καινούργια στήλη τέρμα αριστερά (από το Edit Columns)

Στον κώδικα του GridView control βρίσκουμε την ετικέτα <Columns> και μέσα σε αυτή εντοπίζουμε την ετικέτα

<asp:TemplateField HeaderText="Νο."></asp:TemplateField>

Είναι η ετικέτα που μόλις δημιουργήσαμε. Στο περιεχόμενο της ετικέτας αυτής και μέσα σε ετικέτα <ItemTemplate>, γράφουμε τον κώδικα που θα μετράει τον αριθμό των προϊόντων που εμφανίζονται:

<asp:TemplateFieldHeaderText="Νο.">

</asp:TemplateField>

Εκτελούμε και βλέπουμε το αποτέλεσμα

Στα Tasks του DetailsView control επιλέγουμε Add New Field.

Επιλέγουμε TemplateField ως Field Type

Πατάμε OK (αφήνοντας κενό το HeaderText, γιατί στο νέο πεδίο δε θέλουμε κάποια περιγραφή να εμφανίζεται).

Στα Tasks του DetailsView επιλέγουμε Edit Templates.

Προσθέτουμε ένα Button στο ItemTemplate με Τext “Αγορά”

Κάνουμε διπλό click στο κουμπί για να οδηγηθούμε στο Button2_Click event.

Σε αυτό γράφουμε τον παρακάτω κώδικα

Protected void Button2_Click(object sender, EventArgs e)

{

Session["ProductID"] = DetailsView1.DataKey.Value;

Response.Redirect("~/Registered/Cart.aspx");

}

Επιλέγουμε End Template Editing στο DetailsView

Εκτελούμε και βλέπουμε το αποτέλεσμα

Εικόνα 5.32 Στοιχειώδες καλάθι αγορών

Στην σελίδα Cart.aspx

Προσθέτουμε στο δεύτερο τμήμα της (Main content) μια επικεφαλίδα Καλάθι Αγορών (h2), και

Προσθέτουμε ένα Label με κενό text

Προσοχή: αν θελήσουμε να τα βάλουμε στο πρώτο τμήμα της (featured content), τότε για να έχουμε σε εσοχή την εμφάνιση όσων θέλουμε, θα πρέπει στον κώδικα που παράχθηκε, να περικλείσουμε με κατάλληλο <div> τα <h2> και <asp:Label>, για να έχουμε:

<h2>Καλάθι Αγορών</h2>

<p>

<asp:Label ID="Label1" runat="server"></asp:Label>

</p>

</div>

Στο Page_Load event της σελίδας προσθέτουμε τον παρακάτω κώδικα

Protected void Page_Load(object sender, EventArgs e)

{

if (Session["ProductID"] == null)

{

Label1.Visible = true;

Label1.Text = "Το καλάθι αγορών σας είναι άδειο";

}

else

Label1.Visible = false;

}

Εικόνα 5.33 Άδειο καλάθι αγορών

Στην σελίδα Cart.aspx εισάγουμε ένα DetailsView. Στα Tasks επιλέγουμε New Data Source στο Choose Data Source

επιλέγουμε SQL Database (επόμενο)

επιλέγουμε το connectionString που έχουμε ήδη δημιουργήσει για τον Ιστότοπό μας (επόμενο)

επιλέγουμε την ανάκτηση όλων των στηλών του πίνακα (tick στο *)

Πατάμε το κουμπί WHERE και επιλέγουμε

· Column: ProductID

· Operator: =

· Source: Session

· Session Field: ProductID

· Πατάμε το κουμπί Addκαι το OK

· Βλέπουμε ότι σχηματίστηκε το παρακάτω query:

SELECT * FROM [Product] WHERE ([ProductID] = @ProductID)

Πατάμε το επόμενο και κάνουμε Τest Query (Δίνουμε μια τιμή στο ProductID για το test, πχ. 1020). Αφού δούμε τα δεδομένα μας πατάμε το Finish.

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

<asp:SqlDataSourceID="SqlDataSource1"runat="server"

ConnectionString="<%$ConnectionStrings:ConnectionString%>"

SelectCommand="SELECT * FROM [Product] WHERE ([ProductID] = @ProductID)">

<asp:SessionParameterName = "ProductID” SessionField =

"ProductID" Type="Int32"/>

</SelectParameters>

</asp:SqlDataSource>

Στα Tasks του DetailsView επιλεγούμε μια μορφοποίηση (AutoFormat)

Επιλέγουμε Edit Fields

· Αφαιρούμε τα πεδία ProductID, Quantity και Available και αλλάζουμε τα HeaderText στα Ελληνικά (Όνομα, Περιγραφή, Τιμή)

· Δίνουμε στο Πεδίο Price το {0:c} ως Data Format String

Μεγαλώνουμε κατάλληλα το DetailsView στο μήκος και εκτελούμε, κάνουμε δοκιμές και βλέπουμε το αποτέλεσμα

3. Ασκήσεις Αυτοαξιολόγησης

3.1. Μετρήσεις συμβάντων

Εκφώνηση:

Στην σελίδα 'Statistics' του Ιστότοπου της άσκησης 2.3, προσθέστε δυο Label κάτω από το κουμπί (όπως στην παρακάτω εικόνα), με ID: Label2 και Label3. Γράψτε τον κατάλληλο κώδικα ώστε το Label2 να περιέχει μήνυμα με τον αριθμό των clicks που είχαν κάνει οι προηγούμενοι χρήστες πριν προσπελάσει τον Ιστότοπο ο τρέχων χρήστης, και στο Label3 μήνυμα με το τρέχoν πλήθος των clicks όλων των χρηστών (προηγούμενων + συνδεδεμένων αυτή τη στιγμή).

Εικόνα 5.34 Μετρήσεις συμβάντων

3.2. Σύνδεση μηχανισμών

Εκφώνηση:

Στην σελίδα 'Contact' του Ιστότοπου της άσκησης 2.6 προσθέστε ένα GridView control, το όποιο θα δείχνει μόνο τα πεδία 'Description' και 'Name' και θα έχει επιπλέον δυνατότητα επιλογής γραμμής (Select), καθώς και δυνατότητα Sorting και Paging με PageSize 3.. H επιλογή κάποιας Εταιρίας στο GridView θα προκαλεί την εμφάνιση του στο FormView (το οποίο όμως δε θα έχει paging).

Εικόνα 5.35 Σύνδεση μηχανισμών

3.3. Σελίδα Διαχείρισης

Εκφώνηση:

Στην σελίδα 'AdminSelida' του Ιστότοπου της άσκησης 2.7, να κάνετε τις απαραίτητες ενέργειες, ώστε ο διαχειριστής να μπορεί να ενημερώνει τη βάση. Προσοχή: η Διαγραφή να γίνεται με ασφαλή τρόπο (δηλαδή να ζητείται επιβεβαίωση, ενώ πρέπει να μπορεί να γίνεται και Εισαγωγή νέας εγγραφής εκτός από Διόρθωση.

Εικόνα 5.36 Σελίδα διαχείρισης

Εικόνα 5.37 Σελίδα διαχείρισης - δυνατότητα εισαγωγής νέας εγγραφής

Εικόνα 5.38 Εισαγωγή νέου προϊόντος

Εικόνα 5.39 Σελίδα διαχείρισης - ενημερωμένη λίστα προϊόντων

3.4. Ολοκλήρωση αγοράς

Εκφώνηση:

Στην σελίδα 'Cart' του Ιστότοπου της άσκησης 2.7, προσθέστε ένα κουμπί με το κείμενο "Ολοκλήρωση αγοράς" το οποίο θα κρύβει το προϊόν και θα εμφανίζεται το μήνυμα "H αγορά σας ολοκληρώθηκε επιτυχώς". Το κουμπί αυτό δε θα πρέπει να φαίνεται όταν το καλάθι είναι άδειο.

Εικόνα 5.40 Καλάθι αγορών με καταχωρημένο προϊόν

Εικόνα 5.41 Ολοκληρωμένη αγορά

Σημείωση: Στον Ιστότοπο του συγγράμματος (http://ec-tech.uom.gr/WT-ECOM), θα βρείτε τον πηγαίο κώδικα για όλες τις υποδειγματικά λυμένες ασκήσεις, καθώς και για τις ασκήσεις αυτοαξιολόγησης.

4. Συμπεράσματα

Στο κεφάλαιο αυτό παρουσιάστηκε ένα σύνολο εργαστηριακών ασκήσεων, με σκοπό την κατανόηση τεχνικών προγραμματισμού από την πλευρά του διακομιστή (server-side scripting), με χρήση της τεχνολογίας ASP.NET (Active Server Pages). Οι ασκήσεις αυτές έχουν υποδειγματικά επιλυθεί στο περιβάλλον Visual Studio και χρησιμοποιούν ως βασική γλώσσα προγραμματισμού στον Ιστό τη γλώσσα C#. Μέσω των εργαστηριακών ασκήσεων παρουσιάζονται τεχνικές ανάπτυξης εφαρμογών Ιστού, ενώ ιδιαίτερη έμφαση δίνεται σε εφαρμογές που υποστηρίζουν συναλλαγές Ηλεκτρονικού Εμπορίου.

5. Τεστ αξιολόγησης

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

6. Βιβλιογραφία

Gaylord, J. N., Wenz, C., Rastogi, P., Miranda, T. & Hanselman, S. (2013). Professional Asp. net 4.5 in C# and VB. John Wiley & Sons.

Spaanjaars, I. (2014). Beginning ASP.NET 4.5.1: in C# and VB, Wrox Programmer to Programmer, Wrox.

Wojcieszyn, F. (2014). ASP. NET Web API 2 Recipes: A Problem-Solution Approach. Apress.

Χρήσιμοι δικτυακοί τόποι:

Developing Web Applications with ASP.NET:
https://msdn.microsoft.com/en-us/library/bb400852%28v=vs.110%29.aspx
C# Web Development:
http://www.bellevuecollege.edu/ce/category/c-web-development/
Web application development resources:
https://msdn.microsoft.com/en-us/web-app-development-msdn.aspx
ASP.NET tutorial:
http://www.w3schools.com/aspnet/
Visual C# Resources:
https://msdn.microsoft.com/en-us/vstudio/hh341490.aspx

Τέλος Κεφαλαίου

Περιεχόμενα

1. Εισαγωγή

2. Προγραμματισμός από την πλευρά του Διακομιστή - ASP.NET Τεχνολογία και Περιβάλλον Προγραμματισμού Visual Studio

2.1. Βασικοί μηχανισμοί διάδρασης (UI controls) ενός Ιστότοπου

2.2. Χρήση και επεξεργασία προτύπων και μορφοποιήσεων CSS

2.3. Προσαρμογή έτοιμου Ιστότοπου - χρήση των Application και Session Events

2.4. Φόρμες και Επικύρωση Δεδομένων (Validation)

2.5. Σύνδεση σε Βάση Δεδομένων

2.6. Διαχείριση Βάσης Δεδομένων μέσω Ιστοσελίδας

2.7. Ηλεκτρονικό Κατάστημα με ASP.NET Web Forms

3. Ασκήσεις Αυτοαξιολόγησης

3.1. Μετρήσεις συμβάντων

3.2. Σύνδεση μηχανισμών

3.3. Σελίδα Διαχείρισης

3.4. Ολοκλήρωση αγοράς

4. Συμπεράσματα

5. Τεστ αξιολόγησης

6. Βιβλιογραφία