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 Jarek FrancikKingston 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?

What we try to do?

What we try to do?

What we try to do?

Client & Server

Client Server

Client & Server

Client Server

Client & Server

Client Server

Remote File System

Client & Server

Client Server

REQUEST: GET

RESPONSE: HTML

Remote File System

Client & Server

CLIENT SIDE PROCESSING

Client Server

REQUEST: GET

RESPONSE: HTML

Files served over the network may contain HTML, CSS, JavaScript,Flash and may be pretty much complex!

Remote File System

Client & Server

Client Server

REQUEST: GET

RESPONSE: HTML

Remote File System

Client & Server

Client Server

REQUEST: GET

RESPONSE: HTML

Remote File SystemREQUEST: GETRESPONSE: HTML

Client & Server

Client Server

REQUEST: POST

RESPONSE: HTML

Remote File SystemREQUEST: POSTRESPONSE: HTML

Client & Server

Client Server

REQUEST: POST

RESPONSE: HTML

Remote File SystemREQUEST: POSTRESPONSE: HTML

DB

Client & Server

Client Server

REQUEST: POST

RESPONSE: PHP

Remote File SystemREQUEST: POSTRESPONSE: PHP

DB

SERVER SIDE PROCESSING

Client-Side Processing Server-Side Processing

DB

Client-Side Processing• 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

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

Possible Options

• PHP• ASP.NET• Java• Ruby on Rails• Python• Perl

So, which way to go?

PHP

• Scripting language for web development• Created by Rasmus Lerdorf 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

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 - PlatformAppacheMySQL PHP Perl

DB

What do we need?

• Operating System• Web Server• Database• Scripring Language

XAM P P

DB

XAMPP

http://www.apachefriends.org/en/xampp.html

or google for “xampp”

XAMPP

1. Download and install – it’s easy2. Run XAMPP Control Panel3. Start Apache & MySql4. Run in your browser:

http://localhost5. Click Explore and go

to htdocs to browseyour web files

6. Use MySql Admin tosetup your databasewith mySqlAdmin

phpMyAdmin

phpMyAdmin

phpMyAdmin

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 "<img src='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

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

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>

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