ΓΟΜΖ Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Γ. Εήλδξνο Σρνιή Ζιεθηξνιόγσλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ
Σηόρνο ηεο ώξαο Γόκεζε θώδηθα Σπλεξγαζία ζε νκάδεο Φσξηζκόο ζε αξρεία Σηπι θώδηθα Front-end θαη back-end Τν πξόηππν MVC
Τίπνηα δελ γίλεηαη από έλαλ Facebook: 4 ηδξπηέο 1700 άηνκα ζήκεξα Google: 2 ηδξπηέο 23000 άηνκα ζήκεξα Microsoft: 2 ηδξπηέο Apple: 3 ηδξπηέο YouTube: 3 ηδξπηέο πξέπεη λα κάζνπκε λα ζπλεξγαδόκαζηε!
Γόκεζε θώδηθα Καζαξόηεξνο θώδηθαο γηα εκάο Δπεμεξγαζία κεηά από έλα κήλα ή έλα ρξόλν Καζαξόηεξνο θώδηθαο γηα ηνπο άιινπο Κη άιινη δηαβάδνπλ ηνλ θώδηθά ζαο Πξέπεη λα ηνλ θαηαιάβνπλ Πξέπεη λα ηνλ αιιάμνπλ Πξέπεη λα ηνλ μαλαθαηαιάβνπκε ρξεηαδόκαζηε κία θνηλή ζπληζηακέλε
Γόκεζε θώδηθα Πιενλεθηήκαηα νξζήο δόκεζεο: Maintainability Ο θώδηθαο κπνξεί λα αιιάμεη εύθνια Δίλαη πξνζαξκόζηκνο Δίλαη επεθηάζηκνο Δίλαη επαλάγλσζηνο Δθθξάδεη ηελ ζθέςε καο
Programs must be written for people to read, and only incidentally for machines to execute.
Σηπι θώδηθα Τν ζηπι θώδηθα νξίδεη ηελ κνξθή ηνπ θώδηθα Πνύ έρεη θελά θαη πνύ όρη Πόζα θελά έρεη Πόηε γίλεηαη indentation Πόηε γίλνληαη αιιαγέο γξακκώλ θ.ό.θ.
Γύν δηαθνξεηηθά ζηπι if ( isset( $foo[ bar ] ) ) { dosomething(); } else { dosomethingelse(); } θελό { δίπια ζην if if(isset($foo[ bar ])) { DoSomething(); } else { θάησ από ην if { DoSomethingElse(); } απνπζία θελνύ
Σηπι θώδηθα Αζπλέπεηα: if ( $a ) { dosomething(); } else { dosomethingelse(); }
Σηπι θώδηθα Γελ έρεη ζεκαζία πνην ζηπι ρξεζηκνπνηείηε Γελ έρεη ζεκαζία αλ έρεηε πνιιά θελά ή ιίγα Δηαιέμηε έλα ζηπι θαη θξαηήζηε ην Μία νκάδα Έλα ζηπι Έλα ινγηζκηθό Έλα ζηπι Σπλέπεηα! Οηηδήπνηε άιιν είλαη αληηπαξαγσγηθό
Σηπι θώδηθα Αλ δηαθσλείηε ζην ζηπι... Πην ζεκαληηθό λα γξάθεηε ζην ίδην ζηπι κε ηνπο ζπλαδέιθνπο ζαο Παξά λα γξάθεηε ζε δηαθνξεηηθά ζηπι ζηελ ίδηα νκάδα Σε έλα ήδε ππάξρνλ project, ρξεζηκνπνίεζε ην ζηπι πνπ βιέπεηο ήδε
Σηπι θώδηθα Υπάξρνπλ έηνηκεο πξνηάζεηο Mozilla Google θαη άιιεο. Αλαδεηήζηε γηα Coding Style Βξείηε κία πνπ ζαο ηαηξηάδεη
Σπλεξγαζία ζε νκάδεο Απαηηείηαη θαηακεξηζκόο εξγαζηώλ Απηό ζεκαίλεη ζσζηή δόκεζε Φσξηζκόο ζε αξρεία Όινη πξέπεη λα ζπκθσλήζνπκε: Τη είδνπο θώδηθα γξάθνπκε πνύ; Πνύ ζα γξαθεί ν θώδηθαο... PHP, γηα ηελ ζύλδεζε ζηε βάζε δεδνκέλσλ; HTML, γηα ηελ θόξκα δεκηνπξγίαο ινγαξηαζκνύ; SQL, γηα ηελ δεκηνπξγία ινγαξηαζκνύ; Κάζε πξάγκα πξέπεη λα έρεη κία ζέζε
Φσξηζκόο ζε αξρεία Πξώηε ηδέα: Αληί λα έρσ έλα κεγάιν αξρείν, έρσ πνιιά κηθξόηεξα Δπθνιόηεξε ζπλεξγαζία Ο θαζέλαο δνπιεύεη ζηα αξρεία πνπ ηνλ αθνξνύλ
Σπλαξηήζεηο Δπαλαρξεζηκνπνίεζε θώδηθα Σπρλά κπνξνύλ λα ρξεζηκνπνηεζνύλ ζε αξρεία
Front-end θαη back-end Ζ πξώηε κεγάιε ηδέα! Front-end: Κώδηθαο πνπ αλαθέξεηαη ζηελ δηεπαθή ρξήζηε PHP πνπ παξάγεη άκεζα HTML Σηαηηθό HTML CSS Javascript Δηθόλεο θ.ό.θ.
Front-end θαη back-end Back-end: Κώδηθαο πνπ επεμεξγάδεηαη ηα δεδνκέλα PHP πνπ δελ παξάγεη HTML Σπλαξηήζεηο επεμεξγαζίαο δεδνκέλσλ Σπλαξηήζεηο απνζήθεπζεο δεδνκέλσλ SQL
Front-end Back-end
Front-end θαη back-end Φσξίδνπκε ζε μερσξηζηά αξρεία Τν front-end Τν back-end Σην front-end δελ ππάξρεη SQL Σην back-end δελ ππάξρεη HTML/CSS Τν front-end πεξηγξάθεη ηελ παξαγσγή ηεο δηεπαθήο ρξήζηε Τν back-end πεξηγξάθεη ηελ επεμεξγαζία, απνζήθεπζε, αλάθηεζε δεδνκέλσλ
Front-end θαη back-end Αο ηα ρσξίζνπκε! Τν back-end ζπρλά αλαθέξεηαη θαη σο models Σπρλό θαηλόκελν ζε web εθαξκνγέο: Φάθεινο models πνπ πεξηέρεη ηνλ back-end θώδηθα
Decoupling Κάζε ηκήκα θώδηθα γλσξίδεη κόλν όζα ρξεηάδεηαη λα γλσξίδεη Κάζε είδνπο «γλώζε» ππάξρεη κόλν ζε έλα ζεκείν ηνπ θώδηθά καο Front-end γλσξίδεη: Όηη ρξεζηκνπνηνύκε HTML Πνηα έθδνζε ηεο HTML ρξεζηκνπνηνύκε Back-end γλσξίδεη: Όηη ρξεζηκνπνηνύκε MySQL Πνηα έθδνζε ηεο MySQL ρξεζηκνπνηνύκε Πνην είλαη ην ζρήκα καο
Decoupling Front-end δελ γλσξίδεη: Αλ ρξεζηκνπνηνύκε αξρεία ή βάζε δεδνκέλσλ γηα απνζήθεπζε Αλ απνζεθεύσ ην όλνκαηεπώλπκν σο όλνκα + επώλπκν Αλ ηα δεδνκέλα πξνέξρνληαη από αλάθηεζε ή από ππνινγηζκό Back-end δελ γλσξίδεη: Όηη παξάγνπκε HTML Αλ ρξεζηκνπνηνύκε XHTML 1.0 Strict ή όρη Όηη ν ρξήζηεο είλαη άλζξσπνο θαη όρη αξάρλε
<h2>τι είπαν οι άλλοι</h2> <ol> <?php front-end $res = mysql_query( "SELECT username, text FROM }?> </ol> shouts CROSS JOIN users ON shouts.userid = users.userid ORDER BY created DESC; ); while ( $row = mysql_fetch_array( $res ) ) {?><li><strong><?php echo $row[ 'username' ];?>:</strong> <span><?php echo $row[ 'text' ];?></span></li><?php front-end back-end
Σαιάηα από ηνλ Chiot's Run
<h2>τι είπαν οι άλλοι</h2> <ol> <?php front-end $res = mysql_query( "SELECT username, text FROM }?> </ol> shouts CROSS JOIN users ON shouts.userid = users.userid ORDER BY created DESC; ); while ( $row = mysql_fetch_array( $res ) ) {?><li><strong><?php echo $row[ 'username' ];?>:</strong> <span><?php echo $row[ 'text' ];?></span></li><?php front-end back-end
Πώο ζα ρσξίζνπκε απηό ηνλ θώδηθα; Τν HTML ζην front-end Ζ SQL ζην back-end
models/shouts.php: $res = mysql_query( "SELECT username, text FROM shouts CROSS JOIN users ON shouts.userid = users.userid ORDER BY created DESC; ); back-end
<h2>τι είπαν οι άλλοι</h2> έιιεηςε δηαθάλεηαο αλαθνξάο <ol> <?php include models/shouts.php ; while ( $row = mysql_fetch_array( $res ) ) {?><li><strong><?php echo $row[ 'username' ];?>:</strong> back-end <span><?php echo $row[ 'text' ]; back-end?></span></li><?php }?> </ol> front-end?
<h2>τι είπαν οι άλλοι</h2> <ol> <?php include models/shouts.php ; $shouts = GetShouts();?> </ol> foreach ( $shouts as $shout ) {?><li><strong><?php echo $shout[ 0 ];?>:</strong> <span><?php echo $shout[ 1 ];?></span></li><?php } δηεπαθή (API) front-end/back-end
models/shouts.php: function GetShouts() { $rows = array(); $res = mysql_query( "SELECT username, text FROM shouts CROSS JOIN users ON shouts.userid = users.userid ORDER BY created DESC; ); while ( $row = myql_fetch_array( $res ) ) { $rows[] = array( $row[ username ], $row[ text ] ); } return $rows; }
Front-end θαη back-end Back-end πνπ δεη ζηνλ θάθειν models : Δκπεξηέρεη όιε ηελ ινγηθή επηθνηλσλίαο κε ηελ βάζε Απνζήθεπζε Αλάθηεζε Δπεμεξγαζία Δελ γλσξίδεη γηα ηνλ ηξόπν ρξήζεο ησλ δεδνκέλσλ Δελ γλσξίδεη από πνύ πξνήιζαλ ηα δεδνκέλα
Front-end θαη back-end Front-end: Δκπεξηέρεη όιε ηελ ινγηθή δηεπαθήο ρξήζηε Παξαγσγή HTML CSS/JS Δελ γλσξίδεη γηα ηνλ ηξόπν απνζήθεπζεο ησλ δεδνκέλσλ Δελ γλσξίδεη πώο αλαθηνύληαη ηα δεδνκέλα
Σπλεξγαζία ζε νκάδεο Σε κία νκάδα ν θάζε πξνγξακκαηηζηήο επηιέγεη αλ ζα αζρνιεζεί κε ην back-end ή ην front-end Ταρύηεξε αλάπηπμε Γελ γξάθεηαη ην ίδην πξάγκα 2 θνξέο
if ( isset( $_SESSION[ 'username' ] ) && isset( $_POST[ 'shout' ] ) ) { $shout = $_POST[ 'shout' ]; mysql_query( "INSERT INTO shouts SET back-end text = '". $shout. "', userid = ". $_SESSION[ 'userid' ]. ", created = NOW(); ); header( 'Location: index.php' ); } else {?>Πρέπει να έτεις κάνει είζοδο.<?php } front-end front-end front-end
models/shouts.php: function SaveShout( $userid, $text ) { mysql_query( "INSERT INTO shouts SET text = $text', userid = $userid, created = NOW(); ); }
if ( isset( $_SESSION[ 'username' ] ) && isset( $_POST[ 'shout' ] ) ) { include models/shouts.php ; SaveShout( $_SESSION[ userid ], $_POST[ shout ] ); header( 'Location: index.php' ); } else {?>Πρέπει να έτεις κάνει είζοδο.<?php }
Τη είλαη front-end θαη ηη back-end? Δκθάληζε κελύκαηνο ζθάικαηνο (Γελ έρεηο θάλεη login) Αλάγλσζε δεδνκέλσλ GET Αλάγλσζε δεδνκέλσλ POST Πξνζζήθε εγγξαθήο ζηε βάζε δεδνκέλσλ Δκθάληζε θνπκπηνύ πνπ απνζεθεύεη Φξήζε mysql_fetch_array γηα αλάγλσζε δεδνκέλσλ Δύξεζε κέζνπ όξνπ βαζκνινγηώλ καζεηώλ Φξσκαηηζκόο γξακκάησλ δηεπαθήο κε θόθθηλν ρξώκα
MVC Model-View-Controller Καιόο ν δηαρσξηζκόο Front-end / Back-end Back-end = Model Όκσο ζην Front-end καο κπιέθνπκε δύν πξάγκαηα Τελ παξαγσγή ηεο δηεπαθήο (View) Τελ ζπιινγή δεδνκέλσλ θαη ηηο απαξαίηεηεο θιήζεηο (Controller)
Views Απνθιεηζηηθά ππεύζπλα γηα ηελ παξαγσγή δηεπαθήο Κπξίσο HTML θώδηθαο Μόλν ε απαξαίηεηε PHP π.ρ. foreach γηα παξαγσγή επαλαιακβαλόκελσλ ηκεκάησλ Πξόζβαζε ζε ζπγθεθξηκέλεο νλνκαζκέλεο κεηαβιεηέο Λέγνληαη θαη «Templates» ή πξόηππα
Controllers Απνθαζίδνπλ πνην view θαη πνην model ζα θιεζεί Παίξλνπλ ηα δεδνκέλα από ηνλ ρξήζηε Γίλνπλ ηα δεδνκέλα ηνπ ρξήζηε ζην ζσζηό model Γίλνπλ ηα δεδνκέλα ηνπ ρξήζηε θαη ηνπ model ζην view Σηέιλνπλ πίζσ ηα δεδνκέλα ζηνλ ρξήζηε Τν «ιεπηόηεξν» ηκήκα Τν πξώην θαη ηειεπηαίν πξάγκαηα πνπ ηξέρεη Έρεη ηνλ έιεγρν (controller = ειεγθηήο)
Views Controller Models
if ( isset( $_SESSION[ 'username' ] ) && isset( $_POST[ 'shout' ] ) ) { include models/models/shouts.php ; Controller SaveShout( $_SESSION[ userid ], $_POST[ shout ] ); Controller header( 'Location: index.php' ); } else {?>Πρέπει να έτεις κάνει είζοδο.<?php } Controller View
if ( isset( $_GET[ 'username' ] ) ) { $res = mysql_query( SELECT userid FROM users WHERE model username =. $_GET[ username ]. LIMIT 1; ) ); if ( mysql_num_rows( $res ) == 1 ) {?>Username already taken :-( <input type= text value= /><?php } else {?><input type= text value= <?php echo $_GET[ username ];?> /><?php view } } else {?><input type= text value= /><?php } controller
1. Controller $exists = false; $username = ; if ( isset( $_GET[ 'username' ] ) ) { include models/user.php ; $exists = UsernameExists( $_GET[ username ] ); $username = $_GET[ username ]; } include views/register.php ;
2. Model function UsernameExists( $username ) { $res = mysql_query( SELECT userid FROM users WHERE username = $username LIMIT 1; ); return mysql_num_rows( $res ) == 1; }
2. View <?php if ( $exists ) {?>Το όνομα τρήζηη σπάρτει ήδη :-(<?php }?> <input type= text value= <?php echo $username;?> />
Σε πνην ηκήκα ηνπ MVC αλήθνπλ; Δκθάληζε κελύκαηνο ζθάικαηνο (Γελ έρεηο θάλεη login) Αλάγλσζε δεδνκέλσλ GET Αλάγλσζε δεδνκέλσλ POST Πξνζζήθε εγγξαθήο ζηε βάζε δεδνκέλσλ Δκθάληζε θνπκπηνύ πνπ απνζεθεύεη Φξήζε mysql_fetch_array γηα αλάγλσζε δεδνκέλσλ Δύξεζε κέζνπ όξνπ βαζκνινγηώλ καζεηώλ Φξσκαηηζκόο γξακκάησλ δηεπαθήο κε θόθθηλν ρξώκα Include ηνπ view Include ηνπ model
Σπγραξεηήξηα! Μπνξείηε λα δνκείηε ηνλ θώδηθά ζαο ζσζηά!
Τελ επόκελε θνξά... Δηζαγσγή ζηελ Javascript Πόζεο γιώζζεο πξνγξακκαηηζκνύ ζα ρξεηαζηνύκε πηα;