Image galley ppt


Published on

Image gallery project

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.