42
How to write Facebook A hands-on introduction to Apache, PHP and MySQL Design Workshop lecture by Jarek Francik Kingston University London 2012
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
