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

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

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

Have you seenSocial Network?

What we try to do?

Client & Server Client Server

Client & Server Remote File System Client Server

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

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

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

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

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

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

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

Client-Side Processing Server-Side Processing DB

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

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

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

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

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

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

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

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

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

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

phpMyAdmin

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)

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

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

<!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

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

How to use studentnet

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)

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

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

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