Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Image galley ppt

4,835 views

Published on

Image gallery project

  • Be the first to comment

Image galley ppt

  1. 1. PHP FINAL PROJECTOnline Image Gallery
  2. 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. 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. 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. 5. Database design (Tables)Tables Purpose User - Stores the user information. Album - Stores album information Images - Stores the image information
  6. 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 dateemail varchar(40)password varchar(40)age smallintcontact double Imagesgender 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. 7. CSSQ: 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. 8. CSS for internship projectdiv.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. 9. div.Content { // all content is inside division with class=contentpadding: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. 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.phpfloat:left;padding:7px;border:1px solid #9c9c9c;margin:5px;}div.show_image a.remove_image{ // Remove button below imagemargin-left:65px;color:orangered;float:none;text-decoration:none;}
  11. 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. 12. Thank you

×