New User Special Price Expires in

Let's log you in.

Sign in with Facebook


Don't have a StudySoup account? Create one here!


Create a StudySoup account

Be part of our community, it's free to join!

Sign up with Facebook


Create your account
By creating an account you agree to StudySoup's terms and conditions and privacy policy

Already have a StudySoup account? Login here


by: Laylaa Tariq

Cs3010notes2 CMP SCI 3010

Laylaa Tariq

Preview These Notes for FREE

Get a free preview of these Notes, just enter your email below.

Unlock Preview
Unlock Preview

Preview these materials now for free

Why put in your email? Get access to more of this material and other relevant free materials for your school

View Preview

About this Document

Web Programming
Michael Schulte
75 ?




Popular in Web Programming

Popular in ComputerScienence

This 18 page Bundle was uploaded by Laylaa Tariq on Thursday January 21, 2016. The Bundle belongs to CMP SCI 3010 at University of Missouri - St. Louis taught by Michael Schulte in Fall 2015. Since its upload, it has received 27 views. For similar materials see Web Programming in ComputerScienence at University of Missouri - St. Louis.

Similar to CMP SCI 3010 at UMSL

Popular in ComputerScienence


Reviews for Cs3010notes2


Report this Material


What is Karma?


Karma is the currency of StudySoup.

You can buy or earn more Karma at anytime and redeem it for class notes, study guides, flashcards, and more!

Date Created: 01/21/16
2-25-2016 JavaScript - Code attached to points in page to hurdle events - Set of attributes: 1. Put the attribute in the tag with a value of a JS statement [function call] Forms - Gather information of some sort in the client to transmit to server - <form action = “url”> - <input type =…….. name = ……./> - Types: 1. Type = “submit” value = ‘ ‘ (value: button text) 2. Type = “reset” value= ‘ ‘ 3. Type = “input” value = “ “ (intital value of the box) size = “#”(of the box of length #)  1 line of text 4. Type = “radio” value = “ “ 5. Type = “checkbox” value = “ “ 6. Type = “password” size = “#” maxlength = “ “ 7. Type = “hidden” value = “ “ (contents are hidden)  For tracking  No displayed field permits tracking 8. <textarea name= “ “> Default text </textarea>  Not an <input>  Multiple line textbox  Attribute wrap = “ ”:  “off”  “virtual” (text is in 1 long line, but appears wrapped[soft wrap])  “physical” (browser insists physical \n when it wraps) - We might like to attach JS to the form element to enforce format or values 1. SSN 3 digits- 2 digits-digits 2. A quantity purchased >= 0 - We simply attach this code to an event 1. Possible an onclick in an element or an onsubmit in the <form>  Note: if an attribute handler returns false the default does not happen in particular for <form>, the handler returning false form to be not submitted - In the author’s code [S 207 under address] <form…….> <input = “radio” name = “plane” value= “145” or onclick = “planeChoice(145)”/> Function planeChoice(plane { Switch(plane){ Case 145: alert(“The classic 2-seater bi- plane”) Break; } } <form onsubmit = “validClick…….”> Number of items<input type = “text” id = “quantity”/> <input type = “submit”> </form> Function validCheck(){ If (GetElementById(quantity).value < 0){ Alert(“Must order more stuff”) Return false } Return true } 03-01-2016 JS Dynamic Documents - We want an event to change what is seen in the webpage 1. Attributes 2. Value - We build an event handler to call a function to do this - We will use GetElementById() to address the element to change - GEBI() has as properties the attributes for a tag - We assign to that properly to change it 1. <p id = “P1”> ……………………………………………. GEBI(P1).color = “fushia”; - There is a property “value” = contact of a tag GEBI(P1).value = “Don’t tickle me!”; Positioning tags - An object can have a CSS value for “position” = where is it on the page - Position can be: 1. Position: Absolute; left: dimension; top:dimension;  If this one over lays other content both show 2. Position: relative; left: dimension; top: dimension;  Moves the item from the position it would have if there were no positioning  If no left and top, it behaves as of there were no positions  <p>……………………………………….</p> <p position = relative top = 30ex;>,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,</p> - There is a CSS property visibility 1. Visibility = “visible” 2. Visibility = “invisisble” - We might want an overlapping element to hide elements we might think of as behind - We can specify a CSS property 1. Z-index = # - 2 object at the same point - The element with the larger z-index hides the one with the smaller - All of these, plus any other CSS property can be changed dynamically 1. <form action = “ “> Password (label) <input type = password onmouseover = “messages(1)”/ onmouseout = “message(0)” /> SSN (label) <input type = “text” onmouseover = message(2)/ onmouseout = “message(0)” /> Function messages(i) { Switch(i) { Case 1: GEBI(“mess-area”).value = “Enter password”; Break; Case 2: GEBI(“mess-area”).value = “a SSN looks like ……..”; Break; Case 0: GEBI(“mess-area”).value } }  <body style = “text-size: 12pts;” onclick = changeSize(10pt) > <span style = “text-size: 10pts;”> A </span> JS function changeSize(new) { GEBI(“global.text-size = new; } 03-03-2016 JS - Use tag attributes with GEBI to change the webpage 1. GEBI(…….).color = “cerise”; - Use .value property to change contents - Positioning Server Side topics PHP - One of many possible server programming languages with which to write responses to client requests - Embedded in a web page the server executes the code before web page is sent to the client - The unusual extention for a PHP file is .php - The php code is enclosed in <?php cols/> - Anything outside is text send to client - Idents look like identifiers, except it must start with $ - A comment either // or /**/ - Every statement must end in ; - {} do what you expect - A variable is dynamically typed - A variable with no explicit value has value NULL; IsSet() tests whether a var has a value - 4 types: 1. Integer(long int) 2. Double(double) 3. String  ‘ ‘  “ “  No escape sequence, you don’t get a new line with /n, you get it by “/n”  Constant: no escape chars(except maybe\)  Constants allow alt std escapes ,\$ can interpolate variables and expressions  A variable[$ididnt] inside a string isreplaced by its variable  A expression inside $() does - In a string “”, you can interpolate expression values 1. $var 2. $(expr) 3. Value of var or expression is out at that point in string  $ x = 2.14159  $ans = “My answer is $x” - Boolean: 1. TRUE 2. FALSE - Arithmetic operators: usual set 1. Ans is float if either is float 2. Ans is int if both are int 3. Except for/ , answer is float if division is not exact - String operator 1. Concatenation 2. Functions:  Strlen()  Strcmp(,) 1. Ajax - Asynchronous updates to a page - We get a change to page from server, but keep the uncharged parts; don’t download a whole new web page. - Author’s example: 1. Form city state Zip 2. Given zip auto fill city and state - Identified by an event Exam Thursday - 4-5 questions - At least ½ are essay - Open book 03-08-2016 PHP- server side program in response to forms - We could do this in: 1. PHP 2. Perl 3. Python 4. Shell 5. C++ - Php looks a lot like c, java, JS - Dynamically typed - Identifiers are what you expect, EXCEPT they must start with a $ 03-15-2016 Server Programming PHP – server side programming language: 1. Perl 2. Python 3. Csh 4. s/c++ - PHP- dynamically typedthe string opera - Identifiers = identifiers, EXCEPT they start by $ - No declerations - 4 primitive types: 1. Integer (long int) int const 2. Double (double float) 3. Boolean TRUE;FALSE 4. String; no escape character  “ stringsuse escape character  You can interpolate values of expressions  Can use $identifier  “The answer is $ans\n” - Arithmetic operator = c#’s 1. Std arithmetic functions - The only string operator is .concatenation - String functions: 1. Strlen(s) 2. Strcmp(s1,s2)  The return value is a 0 if s1==s2  Returns a negative value if s1 < s2  Returns positive number if s1 > s2 3. Strops(s1,s2); position of s1 in s2  Return false if not found 4. Sunstr(s, i)  Returns substring of s starting at i 5. Substr(s,i1, i2)  Returns substring of s starting at i1 and ending at i2 6. Str to lower 7. Str to upper 8. Chop  Removes the whitespace from end 9. Trim  Removes the whitespace from both ends 10. Ltrim  Removes the whitespace from left end - Assignment = c++ assignment - Output: all output will be sent to client as a webpage - It should make sense in HTML - Printf string 1. Prints string  Printf(“format”, listofexpresseion)  Formatted output not terribly useful in this class - Control structures - Comparisons 1. Usual c++ comparisions:  ==  !=  Plus === and !== that also look at the types 2. Boolean operator  &&  ||  !  Xor - Decisions 1. Std if PLUS possible clauses 2. Elseif(exp){statement} 3. Std switch(exp)……cases - Loops 1. While(exp) {statements} 2. Do….while(exp); 3. For(exp1; exp2; exp3) 03-17-2016 PHP-server side programming - Identifiers = identifiers EXCEPT for loading and dynamically typed Arrays - Set of values chosen by a key - Keys can be strings - Not all keys need to be same type - Create an array: 1. Assign to an array element $arr[lay] = ….. 2. $array = array(key=> value, key => val,…) 3. Array[key] = …..  Key = numeric, 1 bigger that the largest num key already used  $a.array(“Hello” => “World, 7 => 9); Array functions - Unset($arr[$key]) removes it - Arr_keys($ arr) arroy of keys values - Arr_values($ arr) 1. In both cases the arrays are indexed by consecutive numbers 2. Start != null - Sizeof($arr) 1. Length of array - List($var_list) =$ array 1. Assign an element in the array to the corresponding var in the var _list - Array_key_exists (passket, $array) - Ezplode($sep, $str) 1. Yields an array of values in the string spilt by the $sep - Implode($sep, $arr) 1. Goes other way 03-22-2016 PHP-server side programming Arrays-key can be any type - Stay away from floating point numbers - Sequential access in a loop 1. Behind the scene, there is an invisible ptr to the current element The function current($arr) Returns the value at the current location 2. Next($arr) and prev($arr) Move current ptr and return a val at new location or return false if done $value = current($arr) While($value = next($arr){ …. }  False could be a value in the array  Cant tell false as a value from false as end of the array 3. Each($arr)  Return the [key, value]  Moves current  Returns false at end of array  While ($entry = each($arr)){ $entry[“key”] $entry[“value”]} 4. Foreach($arr as $valvar){} 5. Foreach($arr as $key.var= > #val.var){} Functions - Function name(formals){} 1. There is return val; - Function call name(actuals) 1. No check that # actual =#formals - Internal variables are local - Hide the same variable outside the function - Can have a global variable 1. Declare global $ var; - Can havae a static internal variable where values is savied between function calss 1. Static $var; - By default, args are passed by value; changes inside a function to no affect anything outside - You can force call by value for a parameter 1. In function declaration, put & in front the formal  Sort(&$first, &$sec){}  No change to call 2. In function call  Put an & in front of the actual parameter ( either a variable or an array element)  Call to sort x = func(&$x,$a) - Our purpose is to be able to write programs to respond to forms - We want php to send a webpage the PHP is enclosd in <? PHP ?> only the thing outside these is taken is fixed HTML - N output will be interpreted as HTML - In the form element 1. <form method = “get/post” action= “-----.php”> - PHP has 2 predeclared arrats 1. $_GET[] 2. &_POST[]  Key = name in the form element 03-24-2016 Ajax- Asynchronous Updates to a page - Google maps: the display is a picture (actually picture tiles) and when I shift the map slightly, most of the picture doesn’t change. I’d like to download only the changed parts. - The changes are asynchronous - Book’s example: the user enters a zip and the city/state are automatically filled in - 3 steps in Ajax 1. Request(usually due to an event) 2. Server response 3. Client insertion into current page - Stage 1: build request and link to action in part 3 1. Build a XML http request object 2. Xhr = new XHMLHttpRequest();  3 fields: “get/post”) “serverpage? Name/valuetowrokwith”, async) “GET”, getCityState.php?”zip=#zip,trace)  Xhr.onreadyStateChange= functionNoParenthesis(a function pointer) o Specified the code to run when result is seen  Xhr.send(null) o Sends the message  Author’s example <form > <input type=”text” name=”zip” onblur=getPlace(&thisvalue)/> </form>  Another example getPlace.js(which includes at the top) function getPlace(zip) XHMLHttprequest();“GET”,” “+zip,trace); Xhr.onreadyStateChange = receive Place; Xhr.send(null); - Stage 2: server program 1. Standard PHP, except I don’t want a web page  Code <?php $cityState=array(“zip” = “city,state”,……) Header(“context-type:text/plain”); $zip= $_GET(“zip”) If(array-key-exists($zip,$cityState) Print $cityState[$zip] Else Print(“ , “); - Client handling of server’s reponse 1. The function mentioned in onreadyStateCity 2. Function recievePlace() { if(xhr.readyState == 4 $states = 200)} 04-07-2016 AJAX asynchronous updates - Comes in three parts: 1. Request  Xhr = new XMLHttp Request()  (server program and args)  Xhr.onreadstatchange = reponse handler  Xhr.send(null) 2. Server processing  Std PHP 3. Response handler Databases - Very common server requirement in web services What is a database? A collection of data optimized for speed and arbitrary request for the set of answer desired. The program is a database manager: - Oracle - MySQL - PostgreSQL - SQLlite These differ in management detail. They share the server data manipulation. - Language SQL A database program handle’s server databases. Each database is comprised of tables. Each table is comprised of fields (which can be thought of as cols). Table is filled with “structures” — a value for each field. Data extraction SELECT fields to display FROM tables WHERE constraint (condition); You can think the program: 1. Forms cross product of all specific tables 2. Select the elements that match the constraint 3. Displays the specified field This is one of the workhorses in databases. Get to the database Mysql –ucs3010 –p30User10 cs3010 It may happen that some of the tables in a select have fields of same name. How do we distinguish? Tablename.field This often happens with table linkage done by having fields in 2 tables with values that match. Example: order CPU 04-12-2016 Databases - Under lies much of the web application collection of data, optimized for access speed, designed so that arbitrary queries can be made. - Many database managers = server programs 1. MySQL - Will put database access into a server program - It is a bad idea to do database access in client; to do so we’d have to put the DBUser and DBpassword into JS [readable by all client] and allowaccess from all IP address’s ; BAD security - Get info == a query SELECT fieldshown FROM tables WHERE condition - The way it behaves is: 1. forms a cross-product if table required 2. discard all the tables where condition is false 3. show desired fields of what’s left - the same field may occur in several of the tables specified - How do I disambiguify? - Preceed field by table - Add information INSERT INTO table (colname, …) VALUE (val,…..); - Update UPDATE table SET col = val;…… WHERE condition to choose row - Take info out DELETE FROM table WHERE condition to choose row; - We need to talk about database access out of php - We add functions in PHP to give us this access - Connect to database $db (object to use to communicate) = Mysql_connect(“localhost”, “cs3010” “30User10 “, “cs3010”)/ (host, user, password, database name) mysql_connect_error($db) (returns 0 if false and vice versa) 04-14-2016 Database - Critical part of many sites Database manager: MySQL Database name as cs3010 DBUser cs3010 Pass 30User10 - The access language SQL some for all related DB; 1. SELECT 2. INSERT 3. UPDATE 4. DELETE Access is or server => PHP (doing it in client is security hazard) PHP has a set of functions to do this 1. Connect Mysql_connect (“localhost”, “cs3010”, 30User10”, “cs3010”); / (host, user, password, database name) 2. Build a query $query = “ “ $result = MySQLi_query($db, $query); $num_rows = mysqli_num_rows($result) $num_cols = mysqli_num_fields($result) 3. View data retrieved $row = mysqli_fetch_assoc($result) Returns 1 row as an assoc array Key = fieldnames, values = values Next call gives next row 4. Use PHP assoc array functions $key = array_keys($row) $vals = array_values($row)


Buy Material

Are you sure you want to buy this material for

75 Karma

Buy Material

BOOM! Enjoy Your Free Notes!

We've added these Notes to your profile, click here to view them now.


You're already Subscribed!

Looks like you've already subscribed to StudySoup, you won't need to purchase another subscription to get this material. To access this material simply click 'View Full Document'

Why people love StudySoup

Jim McGreen Ohio University

"Knowing I can count on the Elite Notetaker in my class allows me to focus on what the professor is saying instead of just scribbling notes the whole time and falling behind."

Jennifer McGill UCSF Med School

"Selling my MCAT study guides and notes has been a great source of side revenue while I'm in school. Some months I'm making over $500! Plus, it makes me happy knowing that I'm helping future med students with their MCAT."

Steve Martinelli UC Los Angeles

"There's no way I would have passed my Organic Chemistry class this semester without the notes and study guides I got from StudySoup."

Parker Thompson 500 Startups

"It's a great way for students to improve their educational experience and it seemed like a product that everybody wants, so all the people participating are winning."

Become an Elite Notetaker and start selling your notes online!

Refund Policy


All subscriptions to StudySoup are paid in full at the time of subscribing. To change your credit card information or to cancel your subscription, go to "Edit Settings". All credit card information will be available there. If you should decide to cancel your subscription, it will continue to be valid until the next payment period, as all payments for the current period were made in advance. For special circumstances, please email


StudySoup has more than 1 million course-specific study resources to help students study smarter. If you’re having trouble finding what you’re looking for, our customer support team can help you find what you need! Feel free to contact them here:

Recurring Subscriptions: If you have canceled your recurring subscription on the day of renewal and have not downloaded any documents, you may request a refund by submitting an email to

Satisfaction Guarantee: If you’re not satisfied with your subscription, you can contact us for further help. Contact must be made within 3 business days of your subscription purchase and your refund request will be subject for review.

Please Note: Refunds can never be provided more than 30 days after the initial purchase date regardless of your activity on the site.