1 / 42

How to write Facebook A hands-on introduction to Apache, PHP and MySQL

How to write Facebook A hands-on introduction to Apache, PHP and MySQL. Design Workshop lecture by Jarek Francik Kingston University London 2012. Disclaimers. Any resemblance to real web applications, living or dead, is purely coincidental.

gannon
Download Presentation

How to write Facebook A hands-on introduction to Apache, PHP and MySQL

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. How to write FacebookA hands-on introduction to Apache, PHP and MySQL Design Workshop lecture by JarekFrancik Kingston University London 2012

  2. Disclaimers Any resemblance to real web applications, living or dead, is purely coincidental. We use the name Facebook purely in educational purposes. Any infringement of Facebook Inc. rightsis unintentional

  3. Have you seenSocial Network?

  4. What we try to do?

  5. What we try to do?

  6. What we try to do?

  7. What we try to do?

  8. Client & Server Client Server

  9. Client & Server Client Server

  10. Client & Server Remote File System Client Server

  11. Client & Server Remote File System REQUEST: GET RESPONSE: HTML Client Server

  12. Client & Server Remote File System CLIENT SIDE PROCESSING REQUEST: GET RESPONSE: HTML Files served over the network may contain HTML, CSS, JavaScript,Flash and may be pretty much complex! Client Server

  13. Client & Server Remote File System REQUEST: GET RESPONSE: HTML Client Server

  14. Client & Server Remote File System REQUEST: GET RESPONSE: HTML REQUEST: GET RESPONSE: HTML Client Server

  15. Client & Server Remote File System REQUEST: POST RESPONSE: HTML REQUEST: POST RESPONSE: HTML Client Server

  16. Client & Server Remote File System REQUEST: POST RESPONSE: HTML REQUEST: POST DB RESPONSE: HTML Client Server

  17. Client & Server Remote File System REQUEST: POST RESPONSE: PHP REQUEST: POST DB RESPONSE: PHP Client Server SERVER SIDE PROCESSING

  18. Client-Side Processing Server-Side Processing DB

  19. Client-Side Processing Server-Side Processing Executed remotely, on a web server Results must be sent over the network Network latency Pages must be re-loaded in order to view the results* Information easily shared Database back-end Flexible and powerful security control * AJAX technology allows for remote updates without pages being reloaded but technically it is a combination of server side and client side technologies • Executed locally, on client’s computer • Results visible immediately • Fast & dynamic • Processing within a single webpage • Information cannot be shared • No Databases* • Keeping things secret is very difficult – everything is on the user’s computer * Limited local database functionality is available in HTML5, but without sharing

  20. Possible Options • PHP • ASP.NET • Java • Ruby on Rails • Python • Perl So, which way to go?

  21. PHP • Scripting language for web development • Created by RasmusLerdorf 16 years ago • Currently phasing out • Easy to learn but time-consuming to use

  22. What do we need? • Operating System • Web Server • Database • Scripring Language Windows, Linux, MacOS... Appache, IIS, WEBrick... MySQL, Postgres, SQLite, Oracle... PHP, Perl, Python, Ruby, C#, Java... DB

  23. What do we need? • Operating System • Web Server • Database • Scripring Language Windows, Linux, MacOS... Appache, IIS, WEBrick... MySQL, Postgres, SQLite, Oracle... PHP, Perl, Python, Ruby, C#, Java... DB

  24. What do we need? • Operating System • Web Server • Database • Scripring Language Linux, Windows, MacOS... Appache, IIS, WEBrick... MySQL, Postgres, SQLite, Oracle... PHP, Perl, Python, Ruby, C#, Java... DB

  25. What do we need? • Operating System • Web Server • Database • Scripring Language MacOS, Windows, Linux... Appache, IIS, WEBrick... MySQL, Postgres, SQLite, Oracle... PHP, Perl, Python, Ruby, C#, Java... DB

  26. What do we need? • Operating System • Web Server • Database • Scripring Language X - Platform Appache MySQL PHP Perl DB

  27. What do we need? • Operating System • Web Server • Database • Scripring Language X A M P P DB

  28. XAMPP http://www.apachefriends.org/en/xampp.html or google for “xampp”

  29. XAMPP • Download and install – it’s easy • Run XAMPP Control Panel • Start Apache & MySql • Run in your browser:http://localhost • Click Explore and goto htdocsto browseyour web files • Use MySql Admin tosetup your databasewith mySqlAdmin

  30. phpMyAdmin

  31. phpMyAdmin

  32. phpMyAdmin

  33. phpMyAdmin

  34. KU Server • There is a web server available for you at http://studentnet.kingston.ac.uk • Find all details there (or check the end of this presentation)

  35. The First PHP File <!DOCTYPE html> <html> <head> <title>KU Facebook</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1>Facebook</h1> <?php ?> <p><a href="add.php">Add yourself</a></p> </body> </html> index.php

  36. The First PHP File <!DOCTYPE html> <html> <head> <title>KU Facebook</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1>Facebook</h1> <?php echo "Hello, world!"; ?> </body> </html> index.php

  37. <!DOCTYPE html> <html> <head> <title>KUFacebook</title> </head> <body> <h1>Facebook</h1> <?php $hostname = 'localhost'; // localhost is the URL of the server $username = 'root'; // the username in this example is root $password = ''; // put here your MySQL root password (maybe '' if none) // connect to the database server $con = mysql_connect($hostname, $username, $password) or die ('Could not connect: ' . mysql_error()); // display if connection failed mysql_select_db("test", $con); // choose the test database $result = mysql_query("SELECT * FROM faces"); while ($row = mysql_fetch_array($result)) { $name = $row['name']; $file = $row['file']; echo "<div style='float:left;margin-right:1em'>"; echo "<imgsrc='images/$file' />"; echo "<p style='text-align:center'>$name</p>"; echo "</div>"; } ?> <p style='clear:both'><a href="add.php">Add yourself</a></p> </body> </html> index.php

  38. else { ?> <form method="post" action="add.php"> <p><label for="name">Name: </label> <input type="text" name="name" id="name" /></p> <p><label for="file">Profile photo: </label> <input type="text" name="file" /></p> <p><input type="submit" name="submit" value="Send" /></p> </form> <?php } ?> <p style='clear:both'><a href="index.php">Go back to faces</a></p> </body> </html> <!DOCTYPE html> <html> <head> <title>KUFacebook</title> </head> <body> <h1>Facebook</h1> <?php if($_SERVER['REQUEST_METHOD'] == "POST") { $hostname = 'localhost'; // localhost is the URL of the server $username = 'root'; // the username in this example is root $password = ''; // put here your MySQL root password (maybe '' if none) // connect to the database server $con = mysql_connect($hostname, $username, $password) or die ('Could not connect: ' . mysql_error()); // display if connection failed mysql_select_db("test", $con); // choose the test database $name = $_POST["name"]; $file = $_POST["file"]; $result = mysql_query("INSERT INTO faces (name, file) VALUES ('$name', '$file')"); mysql_close($con); echo "<p>Name: $name</p>"; echo "<p>File: $file</p>"; echo "<p>Inserted!</p>"; } add.php

  39. How to use studentnet

  40. How to use studentnet • Your personal website is http://studentnet.kingston.ac.uk/~k01234567(provide your correct k-number) • To upload files, you will need a FTP client program to send your files to the server.Here are configuration settings for Filezilla: • Host: studentnet.kingston.ac.uk • Protocol: SFTP • User: k01234567 (your normal k number) • Password: ******** (your normal password)

  41. How to use studentnet • To configure your database: go to Database Management Tool (link available at the main page http://studentnet.kingston.ac.uk, login with your standard KU knumber and password). • First time, you will be asked to configure the name of your database and the password – remember them! • You will then be able to Manage Database. Use your KU k-number and the database password (you created it in the previous point). • You will find yourself in phpMyAdmin. Use it to create faces table and populate it with data, exactly the same as we did it with XAMPP

  42. How to use studentnet • Before uploading your application you have to setup the connection for the new server – see the example below (do it for each PHP file that connects to the DB): $hostname = 'studentnet.kingston.ac.uk'; // URL of the server $username = ‘k01234567'; // replace with your real username $password = ‘elvis'; // your MySQL database password should go here // connect to the database server $con = mysql_connect($hostname, $username, $password) or die ('Could not connect: ' . mysql_error()); // display if connection failed mysql_select_db("db_k01234567", $con); // replace with your real db name

More Related