Image gallery project

1. PHP FINAL PROJECT
Online Image Gallery

2. Specifications:
 User should be able to register and log in.
 Once user logged in, his Homepage should be seen.
 On Homepage user should see:
1. Navigation bar
2. Recent uploads
3. Create new album facility.
4. Show existing album facility
 On clicking any of his album user should se album details and images
in perticular album.
 On clicking any of the image image should be shown with greater
resolution and remaining images from the same album.
 Image and album should have remove option. On clicking it album or
image should be removed from database.
 Developer can add more exclusivity if needed.

3. Modules:
1. Login module - User can fill forms to register or log in.
2. Database Connect – Connects the Database.
3. Create album - User can create album with any name.
4. File upload –User can upload images in any of his album.
5. Rename file - Uploaded files/images should be renamed before
moved to permanant storage.
6. View album – User can see album details and images in it with
facilitiy like remove image or album.
7. Show image – On clicking any of the image it should be seen
with greater resolution.

4. Operational flow:
Login.php show_image.php
user_action.php home.php
DbConnect.php
(included)
Validate.php
Image_processes.php
View_album.php

5. Database design (Tables)
Tables Purpose
 User - Stores the user information.
 Album - Stores album information
 Images - Stores the image information

6. Database design (Schema)
Album
User
Album_id int (pk)
user_id int (pk)
album_name varchar(25)
fname varchar(15)
user_id (fk_user_id)
lname varchar(15)
date_of_creation date
email varchar(40)
password varchar(40)
age smallint
contact double Images
gender varchar(5)
image_id int (pk)
image_name varchar(50)
image_path varchar(70)
album_id int (fk_album_id)
user_id int (fk_user_id)

7. CSS
Q: What is css?
 CSS stands for Cascading Style Sheets.
 Styles define how to display HTML elements.
 With CSS we can manipulate color, background color, margin
and many more attributes of HTML element.
 External Style Sheets can save a lot of work.
 External Style Sheets are stored in CSS files.
 Link to external css file from html can be given as
<link rel="stylesheet" type="text/css" href="image_gallery.css“ />
 This line should be placed in head tag of HTML

8. CSS for internship project
div.container // outer box
{
width:1024px;
margin:auto;
padding:10px;
border:1px solid lightgray;
}
div.navigation a // Home button
{
text-decoration:none;
font-size:13px;
padding:5px;
font-family:verdana;
background-color: #e5e5e5;
color: #1c1c1c;
border:1px solid gray;
border-radius:5px;
}

9. div.Content { // all content is inside division with class=content
padding:5px;
font-family:verdana;
font-size:13px;
}
div.content input ,select { //Input fields and select field.
padding:3px;
margin-top:5px;
border-radius:5px;
border:1px solid gray;
}
div.Welcome //Welcome user on each page
{
font-family:verdana;
font-size:13px;
color: #1c1c1c;
text-transform:capitalize;
border-bottom:1px dashed gray;
}

10. div.page_title2 // page title with gradient background
{
background-image:-moz-linear-gradient(#1c1c1c,#4c4c4c);
border-radius:10px;
font-family:Helvetica;
color:white;
padding:10px;
text-align:center;
}
div.show_image { // Division accross each image in album.php
float:left;
padding:7px;
border:1px solid #9c9c9c;
margin:5px;
}
div.show_image a.remove_image{ // Remove button below image
margin-left:65px;
color:orangered;
float:none;
text-decoration:none;
}

11. div.images img // all image in album.php inside div with class=images
{
padding-bottom:5px;
}
div.more_images // more images in show_img.php
{
padding:15px;
border:1px solid lightgray;
width:130px;
background-color: #f0f0f0;
}
div.more_images img //images inside div with class=more_images
{
margin-top:5px;
border:1px solid black;
}
div.image_container img //image with greater resolution in show_img.php
{
border:1px solid black;
}

12. Thank you