Presentation is loading. Please wait.

Presentation is loading. Please wait.

CS 174: Web Programming January 27 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak.

Similar presentations


Presentation on theme: "CS 174: Web Programming January 27 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak."— Presentation transcript:

1 CS 174: Web Programming January 27 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak

2 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak 2 Project Teams  Assignments will be done by small project teams.  Form your own teams of 4 members each.  Choose your team members wisely! Be sure you’ll be able to meet and communicate with each other and work together well. No moving from team to team.

3 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Project Teams, cont’d  Each team member will receive the same score on each team assignment and team project.  Each team email to ron.mak@sjsu.edu as soon as possible:ron.mak@sjsu.edu Your team name A list of team members and email addresses  Subject: CS 174 Team Team Name Example: CS 174 Team Super Coders 3

4 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Team Project  Each team picks a web application to develop during the semester.  We’ll start with a very simple application:  ` Prompt the user for some input in the first page displayed at the web browser. The user data is sent to the web server. A simple server program uses the user data to query a database table and fetch some information. Display the information to the user in a second web page at the web browser. 4

5 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Team Project, cont’d  As you learn more web software technologies, subsequent assignments will ask each team to add more capabilities to the simple application. Always add new capabilities to an application that’s already working. Spiral approach.  By the end of the semester, each team will have successfully developed a significant web application! 5

6 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Install XAMPP  Download and install XAMPP Installs and configures Apache (with PHP) and MySQL in one package. Both Windows and Mac.  See: https://www.apachefriends.org/index.htmlhttps://www.apachefriends.org/index.html 6

7 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak XAMPP Control Panel  Use the XAMPP control panel to start or stop: Apache Web Server MySQL Database Server FTP server 7

8 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak “localhost” Home Page 8 First, you may have to visit http://localhost/xampp/lang.php?en which automatically initializes some pages.

9 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak XAMPP Directory Structure 9 Folder htdocs is the root of all the web pages on your web server.

10 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak 10 Take roll!

11 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Client-Server Web Apps 11 Client Side Web Browser Chrome Firefox Safari Microsoft IE Server Side Web Server Apache + PHP HTTP request HTTP response  HTTP request User’s form data  HTTP response Dynamically generated HTML page

12 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Basic “Naked” HTML  HTML specifies a web page’s Content Structure Semantics  HTML should no longer specify formatting. Separate content from formatting. Formatting tags and attributes are deprecated.  Font, color, alignment, etc.  Formatting should be specified by CSS. Cascading Style Sheets 12

13 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak HTML Page Template 13 page title body of page

14 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Paragraphs and Headings 14 Chapter 1 Subsection 1.1 Subsection 1.2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum....

15 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Paragraphs and Headings, cont’d 15... Subsection 1.3 Subsection 1.3.1 Subsection 1.3.2 Subsection 1.3.3 This is a paragraph. Chapter 2 Yet another paragraph.

16 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Paragraphs and Headings, cont’d 16

17 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Ordered and Unordered Lists 17 Unordered list California New York Texas Ordered list CS 146 CS 151 CS 152 CS 153 CS 160 CS 174

18 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Nested Lists 18 Nested list California San Francisco San Jose Los Angeles New York New York City Albany Texas Dallas El Paso

19 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Simple Table 19 Simple table States State Capital Population California Sacramento 38,802,500 New York Albany 19,746,227 Texas Austin 26,956,958

20 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Table with Borders 20 Borders States State Capital Population California Sacramento 38,802,500 New York Albany 19,746,227 Texas Austin 26,956,958

21 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Table with colspan and rowspan 21 Spanning rows and columns States State Capital Population California The Golden State New York Albany Too many! Texas Austin

22 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Links to Pages 22 Links An absolute link to the Paragraphs and Headings page has the complete URL: http://localhost/examples/paragraphs.html A relative link to the Tables page has a URL that is relative to the directory of the current page: tables.html... Demo

23 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Links to Anchor Tags 23... Links to Anchor Tags A link to the the lorem anchor tag on this page uses the location #lorem. Place the anchor tag before the line you want to jump to. You can also jump to the nested anchor tag on the Lists page using the location lists.html#nested Lorem ipsum Lorem ipsum dolor sit amet... Demo

24 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Images 24 An inline image of my two cats. An inline image can serve as a link!

25 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Images, cont’d 25 Demo

26 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Form Data  A user can input data into an HTML form displayed on a client-side web browser.  When the user presses a Submit button, the browser sends to form data to a specified PHP program running on the web server.  The PHP program can use the form data to Query the back-end database. Generate a new HTML page to send to the user’s client-side web browser. 26

27 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Text Input: HTML Page 27

User input First name: Last name:

28 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Text Input: PHP Code 28 Text Greeting Demo

29 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Checkbox Input: HTML Page 29 ... Any formatting? Strong! Emphasized!...

30 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Checkbox Input: PHP Code 30 Demo

31 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Radio Button Input: HTML Page 31 ... Direction> Coming Going... Every radio button in the same group must have the same name (e.g., direction ).

32 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Radio Button Input: PHP Code 32 Demo

33 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Select List Input: HTML Page 33 ... Language? English Français Deutsch

34 Computer Science Dept. Spring 2015: January 27 CS 174: Web Programming © R. Mak Select List Input: PHP Code 34 Demo


Download ppt "CS 174: Web Programming January 27 Class Meeting Department of Computer Science San Jose State University Spring 2015 Instructor: Ron Mak www.cs.sjsu.edu/~mak."

Similar presentations


Ads by Google