CS50 Search

// <35>

` in line 42, that just means a new division, or region of the page. The `id="footer"` gives it an identifier that is `footer` in this case, which we can use elsewhere (like in line 20) to refer to it. ** We also see `

` and `

` on lines 32 and 35 that divides the page invisibly into three sections, which allow us to change their styles independently. ** Notice that we can set lots of settings for `footer` that isn't applied to `header` or `content`, making CSS quite powerful. * Let's go to facebook.com and open our *Developer Tools*: + image::fb-developer-tools.png[alt="Developer Tools on facebook.com", width=900] * We can right-click a word like `Sign` and click *Inspect Element* that bring us directly to the `

` tag in the HTML for that word: + image::sign-up.png[alt="Sign Up selected", width=800] We can actually double-click that element and change the value (at least for us, locally). + image::sign-up-change.png[alt="Changing the value for sign up", width=900] And the sidebar on the right allows us to do the same: + image::sign-up-bigger.png[alt="Changing the value for sign up", width=400] * This makes it easier for us to debug and try things on our own webpages, if we want to create our own. * We'll also want to run websites that are completely our own, where the form no longer asks Google but our own site, with something like this: + [source, html] ---- ...

... ---- [t=43m27s] == PHP * We'll need to introduce another language, PHP, that you may notice is the ending of the page `search.php`. HTML and CSS are just aesthetic languages that allow us to structure and style a page, but not programming languages with complicated logic. * PPHP is a scripting language that is lighter-weight than C. It’s an interpreted language, which means it’s not compiled but executed line by line by an interpreter, a program that reads each line and does what it says (like Python and Ruby and Perl and others). * There are many similaries to C, but some differences include that there's no `main` function anymore, and variables look like this: + [source, php] ---- $s = "hello, world"; ---- ** Notice that there's weak typing, which means variables have types, but we no longer need to specify them (a blessing and a curse!). ** The dollar sign is just PHP syntax for the start of a variable name. * Apart from that, PHP is quite similar. This is a condition in PHP: + [source, php] ---- if (condition) { // do this } else if (condition) { // do that } else { // do this other thing } ---- * Boolean expressions: + [source, php] ---- if (condition || condition) { // do this } ---- + [source, php] ---- if (condition && condition) { // do this } ---- * Switches: + [source, php] ---- switch (expression) { case i: // do this break; case j: // do that break; default: // do this other thing break; } ---- * Loops: + [source, php] ---- for (initializations; condition; updates) { // do this again and again } ---- + [source, php] ---- while (condition) { // do this again and again } ---- + [source, php] ---- do { // do this again and again } while (condition); ---- + [source, php] ---- foreach ($numbers as $number) { // do this with $number } ---- ** That last one is a bit different. It's a convenient feature whereby, if `$numbers` is an array, then `$number` will give you each element of the array one by one, like `$numbers[$i]`, only we didn't need to set up the variable `$i`. * We also tend to pre-initialize arrays in square brackets: + [source, php] ---- $numbers = [4, 8, 5, 16, 23, 42]; ---- * And we also have associative arrays in PHP, which is like a hash table: + [source, php] ---- $quote = ["symbol" => "FB", "price" => "79.53"]; ---- * We'll look at that more closely on Monday, but the takeaway is that lots of languages will start to abstract away these structures, meaning someone else has created those features for you, and you can use them in your own programs without having to implement them all over again. * We could redo all of our problem sets this semester in PHP, perhaps a bit more easily, but what we eventually want to do is to write web applications. * We'll introduce a new concept, MVC (model-view-controller) that factors code in a way that many websites tend to use: + image::mvc.png[alt="MVC as an image", width=400] * This might seem overwhelming, but realize that over 90% of all students who take CS50 end up making final projects based on web programming.