WebProg

Sti College Abril Moldez

<?php WebProg: Midterm Laboratory Activity (PHP Programming) ?>

Sign up and Login w/ view Profile.

Software Needed: A. WAMP (http://www.wampserver.com/en/download.php) download the 32 bit format. B. Text Editor (Dreamweaver http://thepiratebay.org/torrent/3617677/Macromedia_Dreamweaver_8 ) *if you know how to download using torrent clien. Or Notepad++ (http://notepad-plus-plus.org/) B. Browser (MozillaFirefox Recommended because of css3 supports.)

STEP I. After installing WAMP, Create a database using phpMyAdmin.

(You can access the program by running the WAMP server, left click the tray icon ang navigate to phpMyAdmin or by opening Mozillafirefox and typing http://localhost/phpMyAdmin)

PHP MY ADMIN

After Creating Your Database, create a table inside the database. Type users for table name and 10 for fields,

Field Id username password email lastname firstname contact address gender bdate

Type Int varchar varchar varchar varchar varchar varchar varchar varchar varchar

Length 11 255 255 255 255 255 255 255 255 255

Index Primary

A_I check

Use the Value of the above table to create the fields in your table. Click the save button.

STEP II. Writing the SIGNUP,LOGIN,PROFILE & LOGOUT page.

OPEN Dream Weaver and type or copy the following lines of code. Note : It is hard to understand if will copy & paste the code, it is better to type it manually and learn what every syntax do. Remember to write first the HTML tags before inserting PHP tags.

Signup.php
<?php /*Open database Connection I strongly suggest that you put this connection in another php file */ $host = "localhost"; $user = "root"; $pass = ""; $db_name = "moldez"; $connection = mysqli_connect($host, $user, $pass, $db_name); if (!$connection){ echo "Can't connect to MySQL Server. Errorcode: %s\n", mysqli_connect_error(); exit; } function redirect_to( $location = NULL ) { if ($location != NULL) { header("Location: {$location}"); exit; } } $username = ""; $pass1 = ""; $pass2=""; $email1 = ""; $email2 = ""; $lastname = ""; $firstname = ""; $bdate = ""; $address = ""; $contact = ""; $gender = ""; $selected_radio = ""; $month = ""; $day = ""; $year = ""; //if add members button is pressed

if (isset($_POST['register'])){ //Variable Initialization $username = $_POST['username']; $pass1=$_POST['pass1']; $pass2=$_POST['pass2']; $email1 = $_POST['email1']; $email2 = $_POST['email2']; $lastname = $_POST['lastname']; $firstname = $_POST['firstname']; $month = $_POST['month']; $day = $_POST['day']; $year = $_POST['year']; $bdate = $_POST['month'] . $_POST['day'] . $_POST['year']; $address = $_POST['address']; $image = $_FILES['image']['tmp_name']; $contact = $_POST['contact']; //Radio buttons for Gender $gender = $_POST['gender']; $male_status = 'unchecked'; $female_status = 'unchecked'; if ($selected_radio == 'male') { $male_status = 'checked'; } else if ($selected_radio == 'female') { $female_status = 'checked'; } $userCheck= '/^([_a-zA-Z0-9])/'; $regex1 = '/^[_a-z0-9-][^()@,;:\\"[] ]*@([a-z0-9-]+.)+[a-z]{2,4}$/i'; $regex2 = '/^([_a-zA-Z0-9])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-]+)+/'; //check username $usernameCheker = mysql_real_escape_string($username); $sql_username_check = mysqli_query($connection,"SELECT username FROM users WHERE username='$usernameCheker'"); $username_check = mysqli_num_rows($sql_username_check);

$sql_email_check = mysqli_query($connection,"SELECT email FROM users WHERE email='$email1'"); $email_check = mysqli_num_rows($sql_email_check); //Error Handling on Missing Data. Initializing Error Message. $blank_field = "This Field is Required"; $usernameErr = "";

$pass1Err = ""; $pass2Err = ""; $email1Err = ""; $email2Err = ""; $lastnameErr = ""; $firstnameErr = ""; $contactErr = ""; $addressErr = ""; $genderErr = ""; $bdateErr = ""; $imageErr = ""; //Setting Error into an Array. $action = array(); $action['result'] = null; if(!$username){ $action['result'] = 'error'; $userErr = $blank_field; } else { if (strlen($username) < 6) { $action['result'] = 'error'; $userErr = "Username Must be atleast 6 Character"; } else{ if(!ctype_alnum($username)){ $action['result'] = 'error'; $userErr = "Alphanumeric Characters Only."; }else { if ($username_check > 0) { $action['result'] = 'error'; $userErr = "This Username is already in use."; } } } } if(!$pass1){ $action['result'] = 'error'; $pass1Err = $blank_field; }else{

if (strlen($pass1) < 6) { $action['result'] = 'error'; $pass1Err ='Password must be at least 6 characters'; } } if(!$pass2){ $action['result'] = 'error'; $pass2Err = 'Re-type Password'; }else { if($pass2 != $pass1) { $action['result'] = 'error'; $pass2Err = 'Password Mismatch'; } } if(!$email1){ $action['result'] = 'error'; $email1Err = 'You forgot your Email Address'; }else { if(!preg_match($regex2, $email1)){ $action['result'] = 'error'; $email1Err = 'Type in a correct Email Address'; } } if(!$email2){ $action['result'] = 'error'; $email2Err = 'Confirm Email'; }else { if ($email1 != $email2){ $action['result'] = 'error'; $email2Err = 'Email Mismatch'; }else { if($email_check > 0){ $action['result'] = 'error'; $email2Err = 'Email already in use.'; } } } if (!$lastname){ $action['result'] = 'error'; $lastnameErr = $blank_field; } if (!$firstname){

$action['result'] = 'error'; $firstnameErr = $blank_field; } if (!$contact){ $action['result'] = 'error'; $contactErr = $blank_field; }else { if(!is_numeric($contact)){ $action['result'] = 'error'; $contactErr = 'Numbers Only.'; } } if(!$address){ $action['result'] = 'error'; $addressErr = $blank_field; } if (!$gender){ $action['result'] = 'error'; $genderErr = $blank_field; } if((!$month) || (!$month) || (!$year)){ $action['result'] = 'error'; $bdateErr = $blank_field; } //ERROR HANDLING FOR IMAGE UPLOAD if (!$image){ $action['result'] = 'error'; $imgErr = "Please Browse for an image before creating item."; }else { $maxfilesize = 951200; // if($_FILES['image']['size'] > $maxfilesize ) { $action['result'] = 'error'; $imgErr = "ERROR: Your image was too large, please try again."; unlink($_FILES['image']['tmp_name']); }else { if(!preg_match("/\.(gif|jpg|png)$/i", $_FILES['image']['name'] ) ) { $action['result'] = 'error'; $imgErr = "ERROR: Your image was not one of the accepted formats, please try again."; unlink($_FILES['image']['tmp_name']); } } }

if ($action ['result'] != 'error'){ $lastname = mysqli_real_escape_string($connection,$lastname); $image = stripslashes(file_get_contents($_FILES['image']['tmp_name'])); $db_pass = sha1($pass1); $sql = "INSERT INTO users (username,password,email,lastname,firstname,contact,address,gender,bdate) VALUES ('$username','$db_pass','$email1','$lastname','$firstname','$contact','$address','$gender','$bdat e'); "; $register = mysqli_query($connection,$sql); $id = mysqli_insert_id($connection); mkdir("profile/$id", 0755); $newname = "image01.jpg"; $place_file = move_uploaded_file($_FILES['image']['tmp_name'], "profile/$id/".$newname); redirect_to("login.php"); }

}//End of Big IF ?> <html> <head> <title>Signup</title> </head> <body> <form action="signup.php" method="POST" enctype="multipart/form-data"> <table width="944" border="0"> <tr> <td width="149">&nbsp;</td> <td width="278"><h3>REGISTER YOUR ACCOUNT</h3></td> <td width="233">&nbsp;</td> </tr> <tr> <td width="149">&nbsp;</td> <td width="278"><h5>All Fields are Required. Make sure You fill them All.</h5></td> <td width="233">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td><h4>Login Information</h4></td> <td>&nbsp;</td> </tr> <tr>

<td><div align="right">Username:</div></td> <td><input type="text" value="<?php echo $username; ?>" name="username"></td> <td><div id="error"><?php if (!empty($userErr)){echo $userErr;} ?></div></td> <td width="266"><div id="caption">Username must be atleast 6 characters, alphanumeric only and no spaces.</div><hr></td> </tr> <tr> <td><div align="right">Password:</div></td> <td><input type="password" value="<?php echo $pass1; ?>" name="pass1"></td> <td><div id="error"><?php if (!empty($pass1Err)){echo $pass1Err;} ?></div></td> <td width="266"><div id="caption">Your password must contain between 6 and 32 characters.</div><hr></td> </tr> <tr> <td><div align="right">Re-type Password:</div></td> <td><input type="password" value="<?php echo $pass2; ?>" name="pass2"></td> <td><div id="error"><?php if (!empty($pass2Err)){echo $pass2Err;} ?></div></td> </tr> <tr> <td><div align="right">Email Address:</div></td> <td><input type="text" value="<?php echo $email1; ?>" name="email1"></td> <td><div id="error"><?php if (!empty($email1Err)){echo $email1Err;} ?></div></td> <td><div id="caption">Email Address Should be in the Right Format.</div><hr></td> </tr> <tr> <td><div align="right">Confirm Email Address:</div></td> <td><input type="text" value="<?php echo $email2; ?>" name="email2"></td> <td><div id="error"><?php if (!empty($email2Err)){echo $email2Err;} ?></div></td> </tr> <tr> <td><div align="right"></div></td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td><div align="right"></div></td> <td><h4>Personal Information<h4></td> <td></td> </tr> <tr> <td><div align="right">Last Name:</div></td> <td><input type="text" value="<?php echo $lastname; ?>" name="lastname" ></td> <td><div id="error"><?php if (!empty($lastnameErr)){echo $lastnameErr;} ?></div></td> </tr> <tr> <td><div align="right">First Name:</div></td> <td><input type="text" value="<?php echo $firstname; ?>" name="firstname" ></td> <td><div id="error"><?php if (!empty($firstnameErr)){echo $firstnameErr;} ?></div></td>

</tr> <tr> <td><div align="right">Contact Number:</div></td> <td><input type="text" value="<?php echo $contact; ?>" name="contact" ></td> <td><div id="error"><?php if (!empty($contactErr)){echo $contactErr;} ?></div></td> </tr> <tr> <td><div align="right">Address:</div></td> <td><textarea name="address" cols="25" rows="5"><?php echo $address; ?></textarea></td> <td><div id="error"><?php if (!empty($addressErr)){echo $addressErr;} ?></div></td> </tr> <tr> <td><div align="right">Gender:</div></td> <td><input name="gender" type="radio" value="Male" checked> Male<input type="radio" name="gender" value="Female">Female</td> <td><div id="error"><?php if (!empty($genderErr)){echo $genderErr;} ?></div></td> </tr> <tr> <td width="149"><div align="right">Birth Date:</div></td> <td width="278"><select name="month"> <option value="<?php echo $month ?>"><?php echo $month; ?></option> <option value="January">January</option> <option value="Febuary">Febuary</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> <select name="day"> <option value="<?php echo $day; ?>"><?php echo $day; ?></option> <option value=""><?php if(!empty($day)) {echo $day; } ?></option> <?php for ($i=1;$i<=31;$i++){ echo "<option value = \" $i \">" .$i. "</option>"; } ?> </select> <select name="year"> <option value="<?php echo $year; ?>"><?php echo $year; ?></option> <?php

for ($i=1900;$i<=2011;$i++){ echo "<option value = \" $i \">" .$i. "</option>"; } ?> </select> </td> <td width="233"><div id="error"><?php if (!empty($bdateErr)){echo $bdateErr;} ?></div></td> </tr> <tr> <td><div align="right">Profile Picture: </div></td> <td><input type= "file" name="image"></td> <td><div id="error"><?php if (!empty($imgErr)){echo $imgErr;} ?></div></td> <td><div id="caption">JPEG,PNG and GIF format only, 1MB in size.</div><hr></td> </tr> <tr> <td></td> <td><input type="submit" name="register" value="Register"></td> <td>&nbsp;</td> </tr> </table> </form> </body> </html>

Login.php
<?php session_start(); $host = "localhost"; $user = "root"; $pass = ""; $db_name = "moldez"; $connection = mysqli_connect($host, $user, $pass, $db_name); if (!$connection){ echo "Can't connect to MySQL Server. Errorcode: %s\n", mysqli_connect_error(); exit; } function redirect_to( $location = NULL ) { if ($location != NULL) { header("Location: {$location}"); exit; } } if(isset($_POST['login'])){ $username = $_POST['username']; $username = trim($_POST['username']); $password = trim($_POST['password']); $db_pass = sha1($password); //Check database if input exists $sqlCheck = "SELECT id,username,lastname,firstname FROM users WHERE username = '$username' AND password = '$db_pass' LIMIT 1"; $result= mysqli_query($connection,$sqlCheck);

if (mysqli_num_rows($result) == 1){ $found_user = mysqli_fetch_array($result); $_SESSION['user_id'] = $found_user['id']; $lname = $found_user['lastname']; $fname = $found_user['firstname']; $fullname = "$fname". "&nbsp; " . "$lname" ; $_SESSION['name'] = $fullname; redirect_to("profile.php"); }else{

$message = "<div id = \"err\"><img src=\"error.png\" align=\"absmiddle\" />Username / Password Combination Incorrect.</div>"; } } ?> <html> <head> <title>Log in</title> </head> <body> <form action="login.php" method="post"> <table width="560" height="193" border="0"> <tr> <td width="91">&nbsp;</td> <td colspan="2"><h4>Log in Your Account</h4></td> </tr> <tr> <td><div align="right"></div></td> <td width="264"><?php if (!empty($message)) {echo $message; } ?></td> <td width="34">&nbsp;</td> </tr> <tr> <td><div align="right">Username:</div></td> <td><input type="text" name="username" value="<?php if (!empty($username)){echo $username;} ?>" /></td> <td>&nbsp;</td> </tr> <tr> <td><div align="right">Password:</div></td> <td><input type="password" name="password" /></td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td><input type="submit" name="login" value="Log in" /></td> <td>&nbsp;</td> </tr> </table> </table> </form> </body> </html>

Profile.php <?php session_start(); $host = "localhost"; $user = "root"; $pass = ""; $db_name = "moldez"; $connection = mysqli_connect($host, $user, $pass, $db_name); if (!$connection){ echo "Can't connect to MySQL Server. Errorcode: %s\n", mysqli_connect_error(); exit; } $id = $_SESSION['user_id']; $sql = "SELECT id,lastname,firstname,contact,email,address,gender,bdate FROM users WHERE id = {$id}"; $result = mysqli_query($connection,$sql); while ($row = mysqli_fetch_array($result)){ $lastname = $row['lastname']; $firstname = $row['firstname']; $address = $row['address']; $email = $row['email']; $gender = $row['gender']; $contact = $row['contact']; $bdate = $row['bdate'];

$check_pic = "profile/$id/image01.jpg"; if (file_exists($check_pic)) { $pic = "<img class = \"loc\" width = \"200\" src=\"profile/$id/image01.jpg\" />";

} } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>View Item</title> </head> <link rel="stylesheet" type="text/css" href="stylesheets/public.css" /> <style type="text/css"> #status {padding-top:78px; width:800px; text-align:right; color:#FFF; padding-right:50px;} .loc { border:solid 5px #fff;-moz-box-shadow: 2px 2px 0 0 #000; box-shadow: 3px 3px 0 0 #000;} #holder form table { text-align: left; } </style> <body>

<table width="507" border="0" align="center" cellpadding="3" cellspacing="2"> <tr> <td width="151"</td> <td>My Profile</td> <tr> <td width="151"><div align="right">Image : </div></td> <td width="338"><?php echo $pic; ?> </td> </tr> <tr> <td><div align="right">Last Name : </div></td> <td><?php echo $lastname; ?></td> </tr> <tr> <td><div align="right">First Name : </div></td> <td><?php echo $firstname; ?></td>

</tr> <tr> <td><div align="right">Address: </div></td> <td><?php echo $address; ?></td> </tr> <tr> <td><div align="right">Email Address : </div></td> <td><?php echo $email; ?></td> </tr> <tr> <td><div align="right">Gender : </div></td> <td><?php echo $gender; ?></td> </tr> <tr> <td><div align="right">Contact : </div></td> <td><?php echo $contact; ?></td> </tr> <tr> <td><div align="right">Birthday : </div></td> <td><?php echo $bdate; ?></td> </tr> <tr> <td></td> <td><a href="logout.php">Log out</a></td> </tr> </table> </div> </body> </html>

Logout.php

<?php // Four steps to closing a session // (i.e. logging out) // 1. Find the session session_start(); function redirect_to( $location = NULL ) { if ($location != NULL) { header("Location: {$location}"); exit; } } // 2. Unset all the session variables $_SESSION = array(); // 3. Destroy the session cookie if(isset($_COOKIE[session_name()])) {

setcookie(session_name(), '', time()-42000, '/'); } // 4. Destroy the session session_destroy(); redirect_to("signup.php"); ?>

STEP III: After saving the following file to wamp/www folder, run it by typing in your
browser (http:/localhost/signup.php). If you can register, login and view your profile you successfully created the activity. Note: note changing the design using CSS or other ways of designing will only have a grade of 79%. Change signup, login and profile page using CSS. Important: Create a folder inside the www folder and name it profile. This folder will hold all the pictures.

Compressed the profile folder, signup.php, logout.php, profile.php and login.php and save it in a .zip file, name the file (Your Last Name) and email it to me. Deadline of Submission will be on Wednesday 12:00 am. Late submission will have a minus grade. Please Email mo or Message me if you have a question or a clarification: D

Good Day and Happy Coding. God Bless Everyone. Abril Moldez