Basic Web Application Development Spring credit hour Student Taught (Satisfactory/Unsatisfactory)

Transcription

1 Basic Web Application Development Spring credit hour Student Taught (Satisfactory/Unsatisfactory) Matthew Schurr mschurr@rice.edu (404) Instructor Matthew Schurr Duncan College Class of 2016 Phone*: (404) * If you are going to contact me by phone, send me a text message with your name before calling. mschurr@rice.edu Faculty Sponsor Professor Scott Rixner Department of Computer Science rixner@rice.edu Course Objectives and Expectations This course will explore topics in web-based application development and deployment using the latest industry-standard technologies. By the end of the course, students will have a fundamental understanding of how web-based applications function a fundamental understanding of the Model-View-Controller (MVC) software architecture a fundamental understanding of the following technologies: HTTP, HTML, CSS, SQL, and PHP the knowledge and tools necessary to build their own web applications a strong basis in web application development that makes them feel confident enough to explore more advanced topics on their own through other university courses or through freely available internet resources At the end of the semester, students will build a functioning version of the Duncan College Book Exchange (with the guidance of the instructor) to reinforce all of the information they have learned. This course will require between twenty minutes and two hours of homework each week depending on your skill level. The instructor expects that you will complete all of your assignments because you are interested in learning a fun and useful skill that will make you more attractive to employers.

2 Prerequisites You should read this very carefully before enrolling in the course. If you do not meet these requirements, you will probably struggle to complete your assignments within a reasonable amount of time. Due to the short length of classes, we will not be able to cover many basic programming concepts. You will also be expected to learn a new programming language and several markup languages in a single semester. In order to enroll in this course, you should meet one of the following requirements: You have taken COMP 182 Algorithmic Thinking and COMP 215 Intro to Program Design. You have significant programming experience (in any language) and are confident in your ability to pick up new programming concepts/languages quickly. If you are not certain whether or not you should take the course, the instructor. Grading Policy Your final grade will be based on the assignments you turn in, your attendance, and a final project. Assignments are worth 50% of your total grade. Assignments are primarily completion grades; as long as you make an effort to complete the assignment, you will receive full credit. Each assignment is weighted equally. After the due date for each assignment, the instructor will post solutions. You should read through these and be sure that you understand them. No credit will be given for late assignments. Attendance is worth 20% of your total grade. Each class day is weighted evenly. You will receive one excused absence. The final project will be graded by the instructor for accuracy and is worth 30% of your total grade. If you turn in the project late, you will lose 10% of your project grade for each day that the project is late. At the end of the semester, students who have earned a grade of 70% or more will receive a passing grade. Absence Policy Attendance is worth 20% of your total grade. You will lose points on days that you do not show up to class. You will be forgiven one excused absence. Enrollment This course will have an enrollment cap of 19 students.

3 Office Hours Office Hours for this course will be by appointment only. If you require help, please contact the instructor by to establish a meeting time and location. Required Texts and Materials There are no required texts for this class. However, you are expected to have access to a computer running Mac OSX, Windows, or Linux. The following software is required for the class and will run on any platform. Firefox (Free) ( GIT (Free) ( Sublime Text (Free) ( or Dreamweaver (Paid) XAMPP (Free) Paint.NET (Free), GIMP (Free), or Photoshop (Paid) Navicat (Free) or MySQL Workbench (Free) Composer (Free) You should arrive at class on the first day with Firefox, GIT, and Sublime Text installed. All other software will be installed and demonstrated at a later point in time. Course Website The course website can be found on Owl Space. You will turn in your assignments and view your grades using Owl Space. The instructor will also post lecture notes and resources on Owl Space. Meeting Times We will meet once a week on TBA at TBA for one hour in TBA. Papers and Examinations You will not have any long essays or examinations in this class. Honor Code Policy and Expectations I am teaching this class using a practical approach. That means that I encourage you to collaborate with your fellow students and use any available Internet resources, just as you would at a real-world job. As

4 such, you may freely share segments of code with your fellow students, but you may not give them the solution to an entire assignment. You can also copy code that you find on the Internet. If you do share or copy code, you must provide a comment that indicates where you got it. Important: In the end, copying code without understanding it does nothing for you. The goal is for you to learn how to make your own web application. Therefore, I expect you to understand how any third party code that you use works (regardless of its source) and be able to fully explain its operation to me (the instructor). If you are unable to explain how or why something works, you may not use it in your project or assignments (unless the instructor gave it to you). Special Accommodations Any student with a disability that requires accommodation is encouraged to contact both the course instructor and University s Disability Support Services. Syllabus Changes The information contained in this syllabus, other than absence policies, may be subject to change with reasonable advance notice, as deemed appropriate by the instructor. Class Schedule UNIT 1 The World Wide Web (Week 1) In order to create web applications, you must first understand the foundation upon which they are built. This unit will explain the basic components of the Internet and how they interact to enable the creation of complex, interactive applications. You will also learn the fundamentals of the Model-View-Controller software architecture. Assignment 1: You should respond to the following prompt in 300 words or less: Use the Firefox Web Console (Firefox Button > Developer > Web Console) to look at the network requests that occur as you visit your favorite websites (you may want to uncheck the display of CSS and JS notifications in the console so that you can more clearly see the network requests). Make sure that you right click and check Log Request and Response Bodies. What do you observe? Are your observations consistent with what we have learned about the HTTP protocol? Do you notice websites making use of cookies to identify you? Does each page view result in multiple requests? If so, why do you think this happens? UNIT 2 Hypertext Markup Language (Weeks 2-3)

5 We are now ready to explore the first part of our MVC framework: the View. The most fundamental part of any application is the ability to provide users with visual feedback. Websites define their user interface using the HyperText Markup Language (HTML). In this unit, we will learn how to format HTML documents and create interactive forms that can be filled out in your browser. Resources: W3 Schools HTML Tutorial Assignment 2: For this assignment, you must create a test on a topic of your choice using an HTML form. You may write your own questions or pull questions from an existing test, but you must write all of the HTML code yourself you are not allowed to use a form builder or other visual design tool. In the form you create, be sure to include a field for the user s name, address, and year. Your test must have at least ten questions, and must utilize all of the following input elements: Text Area (for this, you might have them copy and paste an honor code statement into the box) Text Field (e.g. short response, name, ) Check Box (e.g. indicate all statements that are true) Selection Box (e.g. select your matriculation year) Radio Buttons (e.g. multiple choice questions) Submission Button Your test must be able to be graded by a machine this means you should not have any open-ended free response questions. Make sure that you keep a copy of this assignment after you turn it in; you will be implementing a system to grade your test after we study server-side programming. UNIT 3 Cascading Style Sheets (Weeks 4-6) We now know enough to create a basic (but fully functional) user interface in HTML. However, almost all modern Internet users expect colorful, feature-filled visual displays that are very different from the simple ones you have learned to create. In this unit, we will learn how to create these more advanced layouts and user interfaces by using the Cascading Style Sheet language to enhance our HTML documents. Resources: W3 Schools CSS Tutorial Assignment 3: Part 1: You must create a layout for book exchange application you will be implementing later in the semester. You should make use of both HTML and CSS. I have provided an example of the minimum acceptable layout given your skill level. Your design does not have to match the example, but it

6 should have all of the same elements (navigation, header, footer, content section, etc.). You should challenge yourself to make your design more aesthetic and user-friendly than the provided example. After completing this assignment, you should save a copy on your hard drive; you will need it later in the course. Part 2: Respond to the following discussion question in 120 words or less: Are there parts of the layout that are re-used between pages? Would it be a good idea to abstract these parts? Why or why not? UNIT 4 Relational Database Systems and SQL (Weeks 7-9) Now that we know how to create a graphical user interface (GUI) for our web application, we are ready to explore the next part of our MVC framework: the Model. Put simply, the model is the format in which we store our application s data. The model bundles together our data and the algorithms that act on it into one convenient package. Guest Video Lecturer: Professor Jennifer Widom (Stanford University) Resources: W3 Schools SQL Tutorial Assignment 4: Part 1: Learning SQL o You must sign up for Stanford University s online Introduction to Databases course. o Under the Interactive Exercises for SQL, complete the SQL Movie-Rating Query Exercises (core set) and SQL Movie-Rating Modification exercises. Since you receive instant feedback, you should be able to answer all of the questions correctly. For this assignment, turn in the following honor code statement: On my honor, I have successfully completed both the SQL Movie-Rating Query Exercise (core set) and SQL Movie-Rating Modification Exercise with a score of 90% or better. (sign your name) o (Optional): If you are still not comfortable with SQL or you want an additional challenge, you should complete some (or all) of the other Movie-Rating SQL exercises that are available, and some (or all) of the Social Network SQL Exercises. Part 2: Your job is to design a database for a book exchange web application. Think about what information you want to store in the database. What do you think is the best, least-redundant database schema to use? List the names of the tables, their columns, and the data type of each

7 column. You should also indicate whether or not columns are keys, indexes, or unique. This is a thinking exercise; it is not necessary to provide the SQL to create the tables. UNIT 5 PHP and Input (Weeks 10-14) We are now ready to explore the last part of our MVC architecture: the Controller. The controller is the glue that combines the Model and View together to create a coherent, interactive application. Resources: W3 Schools PHP Tutorial: Assignment 5: Part 1: You have been given an SQL database schema with data that creates a populated table of users. You must write a PHP program that will perform the following tasks when a button is pressed. Remember, DON T USE GET REQUESTS TO MODIFY THE SERVER! Use a form with a hidden field to create a POST request. o Retrieve all of the records in the table and output the result. o Update a property of one of the users in the table. o Delete a record in the table when a button is clicked. o Insert a new user into the table. o Perform a basic search in the table for users named Bob and output the result. Part 2: For Assignment 2, you created a test on a topic of your choice in HTML. You will now implement a grading system for your test using server-side programming. You will want to perform some validation on the data you receive before you grade it (e.g. name is required, is required, make sure they correctly copied the honor code statement). After submitting the test, you should save their submission in the database, recording the following information: name, , year, score, and a timestamp (you will need to create this table yourself). Part 3: For Assignment 3, you created a HTML/CSS layout for each page in the book exchange. You will now implement these pages as Blade Templates, using a master layout with child views. The master layout should contain parts of the layout that are re-used across multiple pages (navigation, the two columns, etc.). The child views should contain information that is specific only to a single page. Final Project (Weeks 12-14) Your task is to complete the book exchange that we have been working on in class. You have been provided with significant help most of the files you require have been created for you with comments that will guide you through the process, and a large part of the work will be completed in class. You have also been

8 provided with libraries that handle sessions and user authentication. Your application should have the same basic functionality as the Duncan College Book Exchange and you should use it as a reference when designing yours. If you wish to add additional components or functionality, you may choose to do so, however you will only be graded based on the criteria below. Grading Criteria: (100 points) 5 pt Home Page o You display a home page that explains what your application does and how it should be used. 5 pt Navigation System o You display a navigation system on every single page. If the user is logged in, it should contain links to book exchange pages and a log out link. If the user is not logged in, it should contain only a login link. 10 pt Log In/Log-Out System o Users can successfully log in and out of your application. This code has been provided for you; you simply need add links to the log in and log out routes. 10 pt View Book o Your view book page correctly pulls a book and the contact information of the user who listed it from the database and displays it on the page. 20 pt Browse Books o You have a page that allows you to browse through the books in the database. o The listing is paginated. o Users can search through books in the database. o 10pt Extra Credit: Users can sort the order in which books appear by clicking on a column title. This should work when a search filter is applied. 10 pt My Books Page o You display all of the books connected to the user s account. o Books are separated into two categories on the display: listed and sold. o You can move books between the listed and sold categories. 10 pt Add Book Page o You properly display the form to add a book to the database. o The book is correctly added to the database when the user submits the form. 10 pt Edit Book Page o You successfully pull information about a book from the database based on book id. o You verify that the book belongs to the account of the user trying to edit it. o You display the form correctly, filled in with defaults from the database.

9 o The book is properly updated in the database when the user submits the form. 10 pt My Information o You display a form for users to enter their contact information. o The information is properly placed in the database after the form is submitted, regardless of whether or not a record is present already (you may want to use a REPLACE INTO query). o If the user has already entered information, you pull the information from the database and use it to populate the default values in the form. 10 pt Base Functionality o The application is functional and serves its intended purpose. This requires that users are able to: log in, view the books on their account, add books to their account, browse through the books in the database, and get information about individual books. Users who are not logged in should not be able to access anything. Bonus Units I have prepared two bonus units. These units are completely optional and will be taught outside of normal class hours. The locations and times of these optional lessons will be posted on the course website. They will not affect your grade in the course or your ability to complete the final project. These units are for students who are interested in learning a little more about web application development. BONUS UNIT 1 Sessions and Security We need to provide our application with a secure way to remember users between page views and to protect our application against malicious users. In this unit, we will explore the current industry standard security practices and simulate attacks against our own applications to better understand how an attacker might gain unauthorized access. Optional Assignment: Part 1: Read the following article. o "Anonymous Speaks the Inside Story of the HB Gary Hack" o There are many simple (and thus often overlooked) security issues for web-based applications. These security flaws may seem harmless but can quickly open the door for hackers. Once they are inside the door, they can begin to compromise other parts of the network, increasing their access step-by-step until they gain complete control over the network. As you read the article, consider whether or not the knowledge you have learned in this class has made you capable of performing the hack that brought down HB Gary. o

10 Part 2: Provided is the PHP source code and SQL database schema for a web application created by a very negligent programmer. You should set up the application to work on your local server. Using your knowledge of the security flaws we discussed in class, how many ways can you find that will allow you to reach the ACCESS GRANTED message or modify the database without properly gaining access? Note that the only legitimate way to gain access is by using the username demo and password demo. If you want an additional challenge, you should try compromising the application without looking at the source code as that is how most real-world hacks are performed. For this assignment, you should turn a brief (200 words or less) summary of at least two of the security flaws you discovered and how they might be fixed. BONUS UNIT 2 JavaScript, jquery, and AJAX There is still one final component of web-based applications that we have not learned: JavaScript. JavaScript provides us with the ability to make our applications interactive by allowing us to modify a page after it is initially rendered. JavaScript also provides us with the ability to create additional, asynchronous network requests that send or receive data to/from the server after a page has been loaded. Resources: W3 Schools JavaScript Tutorial jquery API Documentation Optional Assignment: Part 1: Respond to the following prompt in 120 words or less. o Bob is planning on implementing an online test-taking system. When a student submits the test, it will be graded using JavaScript and then the student s name and their numeric grade will be submitted to the server using an AJAX POST request. The server will then store the student s name and grade in the database, where the instructor can access it later. o Explain whether or not Bob s implementation is a good one and why you feel that way. If you disagree, how would you implement the test taking system? Part 2: Implement a simple real-time chat application. Use your knowledge of HTML, CSS, PHP, SQL, JavaScript, and AJAX to accomplish this. You may wish to review the code provided in the demos before attempting this. Your system will display a single chat room that receives new messages automatically. Users should be able to post new messages without reloading the page. It is not necessary to utilize sessions or a login system; users will simply provide a name and message each time they post to the chat room.