Posts Tagged align form elements

This will be the last part of the tutorial. Below are links to the previous 2 parts. Sorry for the lack of whitespace use, I’m trying to save you from scrolling horizontally
Link to part 1
Link to part 2

So far, we can register and log in. Now we want to be able to update our profile and add pictures. We’ll need to add another table in our database to store references of the users pictures.

If we were to store the actual picture into the database it could become very big, especially if you decide to allow your users to upload videos too. A better option would be to upload the picture into a directory on the web server and keep a reference to the picture in our database.

So first lets add our table. I added size and type to explain how to retrieve those values but I won’t be using them in my version of the site.

CREATE TABLE `db`.`user_photos` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`profile_id` INT NOT NULL ,
`title` VARCHAR( 128 ) NOT NULL ,
`size` INT NOT NULL ,
`type` VARCHAR( 128 ) NOT NULL ,
`reference` VARCHAR( 255 ) NOT NULL 
) ENGINE = MYISAM

The first 2 parts of the login system set everything up but the output looks terrible. We’ll add some css to make the site somewhat presentable. Give the sections a background and align the form elements with css.

style.css

.formElm
{
	margin-bottom:5px;
}
.formElm label
{
	float:left;
	width:120px;
}
div.divider
{
	width:450px;
	margin:20px auto;
	background-color:#C1f0f6; 
	border:4px #0ebfe9 double; 
	padding:10px;
}

Now we’re ready to make our profile control panel. At the top of our profilecp.php we need to start our session to see if the user is authenticated. So we start our session and include our database info.
Read the rest of this entry »