Reminders. Github & HTTP steps, together with the minimally viable Django product are due this coming Tuesday! CS370, Günay (Emory) Spring / 8

Transcription

1 Reminders Github & HTTP steps, together with the minimally viable Django product are due this coming Tuesday! CS370, Günay (Emory) Spring / 8

2 Reminders Github & HTTP steps, together with the minimally viable Django product are due this coming Tuesday! I posted a crash-course in Python by the original creator, Guido van Rossum. CS370, Günay (Emory) Spring / 8

3 Reminders Github & HTTP steps, together with the minimally viable Django product are due this coming Tuesday! I posted a crash-course in Python by the original creator, Guido van Rossum. Dutch is open to SSH, you can test your Python les under public_html/. CS370, Günay (Emory) Spring / 8

4 Reminders Github & HTTP steps, together with the minimally viable Django product are due this coming Tuesday! I posted a crash-course in Python by the original creator, Guido van Rossum. Dutch is open to SSH, you can test your Python les under public_html/. Let's start by quizzing you. CS370, Günay (Emory) Spring / 8

5 Exit quiz: Version Control and Web Development Basics What is the advantage of committing your changes into VC often? Explain the dierence between commit and push in git. Explain the dierences, and their consequences, between the two form submission methods in the HTTP protocol. Entry survey: Python, Databases, and Django What is the dierence between languages that are interpreted like Python versus compiled like C? What type of persistent storage is commonly used in web applications for storing information such as sessions and user data? To create a webapp as complex as Google docs, what would be the most cumbersome part of developing with CGI?

6 Data-centric Web Apps Databases, MySQL, Model-View-Controller, Django Introduction CS370 SE Practice & Startup, Cengiz Günay (Some slides courtesy of Eugene Agichstein and the Internets) CS370, Günay (Emory) Data-centric Web Apps Spring / 8

7 Remember Sessions? Why did we need them again? How do we keep track? CS370, Günay (Emory) Data-centric Web Apps Spring / 8

8 Remember Sessions? Why did we need them again? How do we keep track? We need persistent data Let's see some Python examples CS370, Günay (Emory) Data-centric Web Apps Spring / 8

9 Using persistent data Store/update data: In plain files (simplest) In a (g)dbm file (better performance) string keys, string values In a "shelf" (stores objects) avoids parsing/unparsing the values In a real database 3rd party database extensions available 1/22/2013 CS 370, Spring

10 Plain Files key =...username, or session key, or whatever... try: f = open(key, "r") data = f.read() # read previous data f.close() except IOError: data = "" # no file yet: provide initial data data = update(data, form) # do whatever must be done f = open(key, "w") f.write(data) # write new data f.close() # (could delete the file instead if updated data is empty) 1/22/2013 CS 370, Spring

11 (g)dbm files # better performance if there are many records import gdbm key = lastname db = gdbm.open("database", "w") # open for reading+writing if db.has_key(key): data = db[key] # read previous data else: data = "" # provide initial data data = update(data, form) db[key] = data # write new data db.close() 1/22/2013 CS 370, Spring

12 Driving your Website with MySQL 1/22/2013 CS 370, Spring

13 Web 2.0 Runs On LAMP Linux File permissions Apache (web server) Hello.html PHP or Python Application logic+ui control MySQL Data (e.g., Facebook) Applications: Facebook, Flckr, YouTube 1/22/2013 CS 370, Spring

14 How Does Facebook Check Your password? Browser posts request to pwd.py with submitted user and password values user = "bob", pass = "1234". Review: how to get these values from CGI? wd.py looks up user "bob" in MySQL $true_pass="1234" if(pass == true_pass){ /*allow to proceed, else: try again*/} 1/22/2013 CS 370, Spring

15 Databases Organize data in tables Just like Excel:, tables have rows and columns Store presidential pets and their owners: table: PresidentialPets Column = Field Row = Record President Term Pet Barack H. Obama 2008 Bo George W. Bush 2000 Miss Beasley Bill Clinton 1992 Socks 1/22/2013 CS 370, Spring

16 Create a Table PresidentialPets President Term Pet Barack H. Obama 2008 Bo George W. Bush 2000 Miss Beasley Bill Clinton 1992 Socks Databases use Structured Query Language (SQL) to store, access, and manipulate data Supposed to be like English... 1/22/2013 CS 370, Spring

17 Create a Table PresidentialPets: SQL CREATE ( ); Result: TABLE PresidentialPets president varchar (128), term int, pet varchar (128) President Term Pet 1/22/2013 CS 370, Spring

18 MySQL Made Easy:. Access class version of phpmyadmin here: 1/22/2013 CS 370, Spring

19 Storing Data: INSERT statement INSERT into PresidentialPets (president, term, pet) VALUES ( William H Taft, 1908, Pauline Wayne ); President Term Pet Barack H. Obama 2008 Bo George W. Bush 2000 Miss Beasley Bill Clinton 1992 Socks William H Taft 1908 Pauline Wayne 1/22/2013 CS 370, Spring

20 Accessing Data: SELECT statement SELECT ( president, term, pet) FROM PresidentialPets WHERE ( term >=2000 ); President Term Pet Barack H. Obama 2008 Bo George W. Bush 2000 Miss Beasley 1/22/2013 CS 370, Spring

21 1/22/2013 CS 370, Spring

22 Exercise: Leave a comment Goal: Store user's vote for favorite donut in database to nd out most popular avors Try it: Approach: 1 Process user input (easy) 2 Connect to database (test) 3 Store comment in database 4 Retrieve and show all comments Results will be in database (use phpmyadmin) Login as test Look into database test CS370, Günay (Emory) Data-centric Web Apps Spring / 8

23 Step 0: Setup Table for your Data Goal: store comments in table comments user Comment IP Address Eugene Blah! James foo Create table comments with 3 columns 1/22/2013 CS 370, Spring

24 Step 2: Connect to Database #connect to mysql database import MySQLdb as mdb con = mdb.connect('localhost', 'cs370', 'pwd', 'cs370000') 1/22/2013 CS 370, Spring

25 Step 3: Store Comment #use cursor cur = con.cursor() Sql = INSERT INTO comments(comment, user, ip) VALUES( blah!, foo, ) cur.execute(sql) # Prepared statement (template) version: Sql = "INSERT INTO comments(comment, user, ip) VALUES(%s, %s, %s) cur.execute(sql, (comment, user, ip)) 1/22/2013 CS 370, Spring

26 Need to sanitize user input! Use: comment = cgi.escape(comment) 1/22/2013 CS 370, Spring

27 Step 4: Display Data try: cur = con.cursor(mdb.cursors.dictcursor) cur.execute("select * FROM comments") rows = cur.fetchall() print "<table>" for row in rows: print "<tr>\n" print "<td>%s</td><td>%s</td><td>%s</td>" % (row["user"], row["ip"], row["comment"]) print "</tr>\n" print "</table>" cur.close() except mdb.error, e: print "Error %d: %s" % (e.args[0],e.args[1]) 1/22/2013 CS 370, Spring

28 Modify the code Leave a Comment You can SSH to dutch Login with your Emory credentials Go to your public_html/ subdirectory Copy les from /home/test/public_html/ Modify them and see the results! Warning: Your webpages on Dutch are accessible from outside campus! Except for SSH, which requires to be on campus or start VPN. CS370, Günay (Emory) Data-centric Web Apps Spring / 8

29 Reference URLs SQL Tutorials: MySQL + Python programming: 1/22/2013 CS 370, Spring

30 Architecture of Web App: Continued The LAMP stack approach 1/24/2013 CS 370, Spring

31 Today s: Step Up a bit When you go too far up, abstraction-wise, you run out of oxygen. Sometimes smart thinkers just don't know when to stop, and they create these absurd, allencompassing, high-level pictures of the universe that are all good and fine, but don't actually mean anything at all. - Joel Spolsky Figure 1: Architecture Astronaut 1/24/2013 CS 370, Spring

32 Web Application Frameworks Closely integrates Data, UI, and logic Simplifies development, maintainance Hides communication from app developer Not required to manually manage database connectivity 1/24/2013 CS 370, Spring

33 App without a framework 1/24/2013 CS 370, Spring

34 Problems What happens when multiple parts of your application need to connect to the database? Solution:? Should a developer really have to worry about printing the Content-Type line and remember to close the database connection? What happens when this code is reused in multiple environments, each with a separate database and password? What happens when a Web designer who has no experience coding Python wishes to redesign the page? One wrong character could crash the entire application. 1/24/2013 CS 370, Spring

35 DRY Principle DRY = Don t Repeat Yourself Every piece of knowledge must have a single, unambiguous, authoritative representation within a system. Antonym: WET (We Enjoy Typing ) BAD. Antonym: Cut & Paste Programming Duplication (inadvertent or purposeful duplication) can lead to maintenance nightmares, poor factoring, and logical contradictions. 1/24/2013 CS 370, Spring

36 Approach: Model-View-Controller Model: maintain state of application. Typically done with a database View: output to client, usually as HTML code, rendered by a web browser. Controller: interaction with user. handles user input, processes data and communicates with Model to save state. Formalized in /24/2013 CS 370, Spring

37 MVC: Example with HTML+CSS Model View Controller (= Browser) 1/24/2013 CS 370, Spring

38

39 Next Time Tuesday's class will be a lab session, bring your laptops We will do a Django tutorial demonstrating the Model-View-Controller approach You can nish up your Prj1 steps (we don't have enough time to do ALL of the steps!) CS370, Günay (Emory) Data-centric Web Apps Spring / 8